CSS3的部分常用新特性

来源：互联网发布：权力的游戏分析知乎编辑：程序博客网时间：2024/05/22 07:50

border-radius 圆角边框
box-shadowtext-shadow 阴影
background 背景
linear-gradient 渐变
text-overflow 文本
transform 2D3D转换
transition 过渡
animation动画 keyframes规则
media 多媒体查询

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的栅格系统的核心原理！

0 0