欢迎光临小鱼网个人网站!

登录/注册
CSS圆角边框渐变实现

1.使用背景重叠

background-origin: border-box | padding-box(默认) | content-box

注:border-box 从边框开始;padding-box(默认) 从内边距开始;content-box 从内容开始。

background-clip: border-box(默认) | padding-box | content-box | text

注:border-box(默认) 填充至边框;padding-box 填充至内边距;content-box 填充之内容;text 作为字体前景色。

background-size: contain | cover | <length> | <percentage> | auto(默认)

注:contain 将图像扩大至适应最短的边,剩余部分默认重复图像;cover 将图像扩大至适应最长的边,图像可能显示不完整;length 两个值依次设置图像宽和高,未设置则为auto;percentage 两个百分比依次设置图像宽和高,未设置则为auto;auto 默认设置。

以下面代码为例

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border:50px solid transparent;
 background-origin:border-box;
 background-clip: content-box,padding-box, border-box;
 background-size: contain,50px 50px,cover;
 background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
}

image.png

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明,确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-clip: padding-box, border-box; /*设置第一个背景和第二个背景的范围*/
 background-size: cover;
 /*由于背景图像不能设置纯色,所以可以使用下面的方式设置纯色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green); 
}

image.png

2.使用伪元素

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明,确保背景渐变色显示*/
 background-clip: padding-box; /*确保此北京范围为内边距内*/
 background: #fff;
}
div::after {
 position: absolute;
 /*以div的content为基准往外扩border的宽度*/
 top: -50px; 
 bottom: -50px; 
 left: -50px;
 right: -50px;
 border-radius: 50px;
 /*设置伪元素背景渐变色*/
 background-image: linear-gradient(yellow, green);
 content: '';
 /*利用层叠将div部分背景置顶*/
 z-index: -1; 
}

3.使用伪元素

<div class="outside"><div class="inside"></div></div>
/*内部div样式*/
.inside {
 width: 960px;
 height: 360px;
 margin: 10px;
 padding: 0px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明,确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-image: linear-gradient(yellow, green);
}
/*外部div样式*/
.outside {
 background: #fff;
 width: calc(100% - 60px);
 height: calc(100% - 60px);
 padding: 30px;
}

Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。