css3 如何实现圆边框的渐变? 如图
程序员文章站
2022-05-19 18:25:52
...
回复内容:
DOCTYPE html>
html>
head>
meta charset="utf-8" />
style>
div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
div:before {content:""; display:block; width:100px;height:50px; margin-top:10px; padding:10px; padding-bottom:0; box-sizing:border-box;
border-top-left-radius:50px;
border-top-right-radius:50px;
background:-webkit-gradient(
linear,
left top,
right top,
color-stop(0,#fff),
color-stop(1,#fff)
),-webkit-gradient(
linear,
left top,
right top,
color-stop(0,#077df8),
color-stop(1,#74baff)
);
background-clip:content-box,padding-box;
}
div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
background:-webkit-gradient(
linear,
left top,
right top,
color-stop(0,#fff),
color-stop(1,#fff)
),-webkit-gradient(
linear,
left top,
right top,
color-stop(0,#fff),
color-stop(1,#74baff)
);
background-clip:content-box,padding-box;
}
style>
head>
body>
div>div>
body>
html>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
推荐阅读
-
css3 如何实现圆边框的渐变? 如图
-
如何通过CSS3实现背景图片色彩的梯度渐变_html/css_WEB-ITnose
-
css3 如何实现圆边框的渐变? 如图
-
如何通过CSS3实现背景图片色彩的梯度渐变_html/css_WEB-ITnose
-
css3实现逐渐变大的圆填充div背景的效果_html/css_WEB-ITnose
-
如何利用CSS3伪元素实现逐渐发光的方格边框
-
css3实现逐渐变大的圆填充div背景的效果_html/css_WEB-ITnose
-
如何使用CSS3的渐变来实现文字颜色的渐变?
-
css3如何实现文字渐变?css3实现文字渐变的三种方法(代码)
-
如何使用CSS3伪元素实现逐渐发光的方格边框