border-radius 圆角边框
实现一个圆形: border-radius:50%
每个角都可以进行分别定义
border-top-left-radius 定义了左上角的弧度
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
box-shadow、text-shadow 阴影
个人最喜欢的一个特性
4个参数分别为: 阴影x轴的距离,Y轴的距离,模糊距离,颜色
div
{
box-shadow: 10px 10px 5px #888888;
}
在 ::before 和 ::after 两个伪元素中添加阴影,能实现很不错的效果哦!
http://www.runoob.com/try/try.php?filename=trycss3_box-shadow6
background 背景
background-image ——背景图片 (可放多个背景图片)
background-size——背景大小
background-origin——背景位置(background-position)的起始点,取值content-box, padding-box,和 border-box,
background-clip——对背景(图片和背景色)的切割, 取值content-box, padding-box,和 border-box,
background-clip和background-origin的区别的深入理解
http://www.cnblogs.com/shytong/p/5077129.html
linear-gradient 渐变
最简单的用法:
渐变方向:向底部
起始颜色:red
最终颜色:blue
background: linear-gradient(to bottom, red , blue);
text-overflow 文本
text-overflow 文本溢出属性,指定如何显示溢出内容(网易2016前端实习生笔试题)
取值
ellipsis 显示省略符 ··· 代替被修剪的文本
clip 修剪文本
string 使用给定的字符串来代替被修剪的文本。Chrome浏览器不支持无法演示。
transform 2D、3D转换
transition 过渡
animation动画 + @keyframes规则
这三个新增特性使得页面可变得非常酷炫!~ 希望初学的小伙伴们自己去尝试玩玩 有惊喜
动画效果代码演示:
div {animation-name: myfirst; animation-duration : 2s;}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@media 多媒体查询
实现响应式布局的核心属性!
此属性能识别不同设备的分辨率,给不同分辨率的设备采用不同的样式,从而达到响应式设计, BootStrap的栅格系统的核心原理!