渐变颜色:
background-image:linear-gradient(to left ,#ccc ,#eee.....) #ccc是颜色的开始到结束可以设置两个或者多个值
1,参数是渐变的方向。第一个是to不变。方向是它的指向
to left是从这右向左。
to right是从左向右。
to top left是从右下向左上。
totop right是从左下向右上。
我一般都下面这个:
background:-webkit-grandient(linear,left top,left bottom,form(#555),to(#000));
white-space设置元素如何处理留白
white-space:nowrap强制文本在一行显示,强制不换行。
white-space:normal 默认。会被忽略
pre-wrap 正常进行换行
word-wrap:normal 默认
word-wrap:break-word 长单词或者url地址进行换行
@font-face加载服务器上的字体,让浏览器端显示用户电脑没有安装的字体
@font-face{
font-family:"A"; //A自命名字体。然后你就可以直接用A来代替这个字体
src:url();
}
使用 .p{font-family:'A'}
background-origin设置背景图片的原始起始位置
background-origin:border-box/padding-box/content-box
border-box:背景从边框开始显示
padding-box:从内边距
content-box:内容区域
background-clip 裁剪背景图片
background-clip:border-box/padding-box/content-box
和background-origin一样的参数,但是他是放在左上角然后按照这个规则进行剪切
background-size:长度值/百分比/cover/contain
cover拉伸并填满
contain 等比例缩放让宽或者高能够填满容器。可能有空白。
background的合集
可以在一个div里面设置多个背景图片,然后通过background-position来定位。
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0; //三个图片三个不同的位置.这样才能不重叠
background-repeat: no-repeat, no-repeat, no-repeat;
属性选择器
E[attr^="a"]{ } 选择匹配元素E.有个属性以a开头。这个属性不一定是class,也可以是href。id。title
E[attr$="a"]{ } --以a结束
E[attr*="a"]{ } 含有a
<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
root 根选择器,匹配所有文档的根目录。在html文档中,根元素始终是html。所以:root{}和html{}意思是一样的。
结构性伪类选择器
1.not。选择除了该元素之外的其他元素
input:not([type="submit"]){
border:1px solid red;
}
border:1px solid red;
}
2.empty 选择没有任何内容的元素
<p>我是一个段落</p>
<p> </p>
<p></p>
p:empty{color:red;}