标签：CSS3 rotate transform animation radius border 属性
5CSS3：
新特性
浏览器支持
5.1圆角边框与阴影
5.1.1圆角边框
border-radius属性
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-left-radius左下角
border-bottom-right-radius右下角
例如：border-top-left-radius:40px 20px左上角一个长比高为2：1的椭圆
border-radius：15px：左右都为圆角
5.1.2阴影
box-shadow属性
inset：水平偏移 垂直偏移 模糊距离 颜色；
inset：可选，内部阴影
outset：默认值，外部阴影
5.2文字与文本
5.2.1text-shadow属性
用来设置文本阴影
水平偏移 垂直偏移 阴影部分 颜色
<h1>
text-shadow:2px 2px 8px blue
</h1>常用文字效果
文字描边：偏移距离设置为零 模糊范围根据字体大小来定
突起浮标：投影黑色，字体白色，模糊范围稍微大一点
word-wrap属性
允许长单词和URL强制强制逆行换行
属性值break-word，normal
@font-face规则
文件夹名通常为fonts
5.3 2D转换
transform属性
5.3.1rotate
旋转
transform:rotate(30px)
正值顺时针旋转
负值逆时针旋转
5.3.2scale
缩放
transform:sale(x,y)
5.4过渡与动画
5.4.1过渡
transition属性
作用：将元素的某个属性从“一个值”在指定时间内过渡到“另外一个值”
transition 属性名 持续时间 过渡方法
transition-property 属性名all 对哪个属性进行变换
transition-duration 持续时间（秒）
transition-timing-function 过渡使用的方法（函数）
linear：匀速
ease：慢快慢
ease-in：慢快
ease-out：快慢
ease-in-out：慢快慢
5.4.2动画
animation属性
animation简写
animation-name：引用@keyframes动画名称
animation-duration：动画完成时间
animation-timing-function：规定动画的速度曲线。默认是“ease”
animation-play-state：running|paused
5.5 3D变换
3D：transform-style:preserve-3d
5.5.1旋转：transform属性
rotateX()
rotateY()角度deg
rotateZ()
父容器：旋转
transform-style:preserve-3d;
transform:rotateY(60deg);
样例
.rotate_left{
-webkit-transform: rotate(7deg);/*IE9*/
-ms-transform: rotate(7deg);/*Firefox*/
-o-transform: rotate(7deg);/*Safari and Chrome*/
transform: rotate(7deg);/*Opera*/旋转用"_"而不是用“-”
5.5.2透视：perspective属性
舞台：透视关系
perspective:100px;
倾听彼岸
发布了7 篇原创文章 · 获赞 0 · 访问量 39
私信
关注
标签：CSS3,rotate,transform,animation,radius,border,属性 来源： https://blog.csdn.net/qq_46031627/article/details/104092130
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。