css3新增了哪几种边框效果,css3边框渐变效果
六种效果
实现代码
html
h1CSS边框过渡/h1 section class= buttons button class= draw draw/button button class= draw Meet draw Meet/button button class= center center/button button button class= spin spin/button button class= spin Circle spin Circle/button button class= spin Thick spin Thick/button/section css3
按钮{背景：无；边框：0;框大小：边框-框；边距：1em填充：1em 2em箱形阴影：插图0 0 0 2px # f45e61颜色：# f45e61font-size:继承；字体粗细：700;位置：相对；垂直对齐：居中；}button:before，button:after { box-sizing:inherit；内容："";位置：绝对；宽度：100%;身高：100%;}.绘制{过渡：颜色0.25s}。画：之前，draw:after { border: 2px纯色透明；宽度：0;高度：0;}.draw:before { top:0；左：0;}.draw:after { bottom:0；右：0;}.draw:hover { color:# 60 daaa；}.绘制：悬停：之前，draw:hover:after { width:100%；身高：100%;}.draw:hover:before { border-top-color:# 60 daaa；边框-右边-颜色：# 60 daaa过渡：宽度0.25秒缓出，高度0.25秒缓出0.25s}.draw:hover:after { border-bottom-color:# 60 daaa；border-left-color:# 60 daaa；过渡：边框颜色0s缓出0.5s，宽度0.25秒缓出0.5s，高度0.25秒缓出0.75s}。满足：hover { color:# fbca 67；}.满足：在{最高：0之后；左：0;}.满足：hover:before { border-top-color:# fbca 67；border-right-color:# fbca 67；}.满足：hover:after { border-bottom-color:# fbca 67；border-left-color:# fbca 67；过渡：高度0.25秒缓出，宽度0.25秒缓出0.25s}.中心：hover { color:# 6477 B9；}.居中：之前，居中：在{最高：0之后；左：0;身高：100%;宽度：100%;变换-原点：中心；}.居中：在{ border-top:2px solid # 6477 B9；边框-底部：2px solid # 6477 B9transform: scale3d(0，1，1)；}.center:after { border-left:2px solid # 6477 B9；右边框：2px solid # 6477 B9 transform:scale 3d(1，0，1)；}.中心：悬停：之前，中心：hover:after { transform:scale 3d(1，1，1)；过渡：变换0.5s}。spin { width:5em；身高：5em填充：0;}.spin:hover { color:# 0 EB 7 da；}.旋转：之前，spin:after { top:0；左：0;}.spin:在{ border: 2px之前纯色透明；}.spin:hover:before { border-top-color:# 0 EB 7 da；边框-右边-颜色：# 0 EB 7 daborder-bottom-color:# 0 EB 7 da；过渡：边框-顶色0.15秒线型，边框-右色0.15秒线型0.1s，边框-底色0.15秒线型0.2s}。spin:在{ border: 0之后纯色透明；}.spin:hover:after { border-top:2px solid # 0 EB 7 da；border-left-width:2px；border-right-width:2px；变换：旋转(270度);过渡：变换0.4s线性0s，边框左宽0s线性0.35s}。圆形{边框半径：100%;箱形阴影：无；}.圈：之前，circle:after { border-radius:100%；}.厚{颜色：# f45e 61}.厚：悬停{ color:# fff；字体粗细：700;}.厚：在{ border: 2.5em之前纯色透明；z索引：-1;}.厚：后{混合-混合-模式：颜色-减淡；z索引：-1;}.厚：悬停：之前{背景：# f45e 61边框-顶部-颜色：# f45e61边框-右边-颜色：# f45e61边框-底部-颜色：# f45e61过渡：背景0s线性0.4s，边框-顶部颜色0.15秒线性，边框-右侧颜色0.15秒线性0.15秒，边框-底部颜色0.15秒线性0.25s}。厚：hover:after { border-top:2.5 em solid # f45e 61；边框左侧宽度：2.5em边框-右边-宽度：2.5em}/*页面样式*/html {背景：# fefefe} body { background:# fefefe；颜色：# 4b507a字体：300 24px/1.5拉托，无衬线；边距：1em自动；最大宽度：36em填充：1em 1em 2em文本对齐：居中；}.按钮{隔离：隔离；} h1 { font-weight:300；字号：2.5em}以上就是六种css3实现的边框过渡效果的详细内容，更多关于CSS3边框过渡的资料请关注其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。