-
.box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }查看全部 -
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
查看全部 -
用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
查看全部 -
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
查看全部 -
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
backgroud-clip默认值为border-box。查看全部 -
CSS3背景 background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
查看全部 -
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }查看全部 -
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
查看全部 -
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
查看全部 -
inset可以卸载参数的第一个或最后一个，其他位置是无效的。
查看全部 -
添加多个阴影，只需要用逗号隔开
查看全部 -
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform:matrix(0.5,3,3,2,100,100);
transform: matrix(0.5,3,3 ,2,100,100);//倾斜设置的是倍数
}
6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nth-last-of-type(n)</title>
<link type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<div>我是第三个Div元素</div>
<p>我是第三个段落</p>
<p>我是第四个段落</p>
<p>我是第五个段落</p>
<div>我是第四个Div元素</div>
<div>我是第五个Div元素</div>
<p>我是第六个段落</p>
</div>
</body>
</html>
.wrapper > div:nth-last-of-type(5){
background: orange;
}
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<div>我是第三个Div元素</div>
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<p>我是第三个段落</p>
</div>
</body>
</html>
.wrapper >p:nth-of-type(2),p:last-of-type,p:nth-of-type(1){
background: orange;
}
查看全部 -
/*使用伪元素制作导航列表项分隔线*/
.nav li:after{
content:"";
position:absolute;
right:0px;
top:15px;
height:20px;
width:1px;
background:linear-gradient(to top,red, orange,yellow,green,blue,indigo,violet)
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
height:0;
width:0;
}
查看全部
举报