CSS3 选择器 边框 背景 渐变

CSS3知识点

  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 2D/3D转换
  • 动画
  • 多列布局

CSS3新增选择器

详细参考-供查阅 实例参考-好好看看

常见CSS3选择器

  • E:nth-child(n) --选择一个元素,它是自己父元素的第n个孩子
  • E:first-child --选择一个元素,它是自己父元素的第一个孩子
  • E:last-child --选择一个元素,它是自己父元素的最后一个孩子
  • E:first-of-type --选择一个元素,它是该类型元素的第一个邻居节点
  • E:last-of-type --选择一个元素,它是该类型元素的最后一个邻居节点
  • E:checked --选择勾选中的元素,如radio或者 checkbox
  • E::before 在元素内部前面添加内容
  • E::after 在元素内容后面添加内容

  • E > F 选择E元素的直接子元素F

  • E + F 选择E元素的下一个邻居F,E和F有相同的父元素
  • E ~ F 选择E元素后面所有的邻居F,E和F有相同的父元素

JS Bin

边框

border-radius

作用:设置圆角

兼容性:IE9+

div{
    border:2px solid;
    border-radius:25px;
}

做一个圆形

.div1{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 10px;
}

部分圆角

.div2{
    width: 40px;
    height: 40px;
    border-radius: 10px 10px 0 0; //左上 右上 右下 左下
}

box-shadow

作用:盒阴影

兼容性: ie9+

div{
    box-shadow: 10px 10px 5px #00ff00; // 右偏移 下偏移 模糊宽度 颜色
}

背景

background-size

作用:设置图片展示的大小

兼容性: ie9+

background-size的用法:

background-size: 50px 50px;
background-size: cover; //此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
background-size: contain; //此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

div{
    width: 100px;
    height: 100px;
    background: url(http://cdn.jirengu.com/public/kejian-cover-fe1.jpeg) 0 0 no-repeat;
    background-size: 50px 50px;
}

background-size

背景渐变

作用: 设置背景色的渐变

兼容性: ie10+, 其他浏览器加前缀支持的版本会更多

  • chrome: -webkit-xxx
  • firefox: -moz-xxx
  • safari: -webkit-xxx
  • opera: -o-xxx

渐变的用法:linear-gradient(方向,颜色1,颜色2...)

1.从上到下渐变(默认)

.div1{
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法 */
}

2.左边到右

.div2{
    background: linear-gradient(to right, red, blue, yellow);
}

3.左上到右下

.div3{
  background: linear-gradient(to bottom right, red, blue);
}

渐变

文本效果

text-shadow

作用: 文本阴影

兼容性: ie10+

h1{
 text-shadow: 5px 5px 5px #FF0000; /*水平阴影,垂直阴影,模糊的距离,以及阴影的颜色*/
}

换行

  1. text-overflow: ellipsis; 文本溢出后隐藏,最后几个字显示为...
  2. word-break: break-all; 单词放不下时断句
  3. word-wrap: break-word; 单词放不下时断句

word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。【参考

一种常见的写法,实现单行最后几个字省略为...

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

字体

作用:用户可以使用自己的字体设置文字字体

兼容性:ie9+

使用方法:

1.用@font-face定义字体 2.在其他样式font-family处可使用定义的字体

@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>