建企业网站时使用CSS边框圆角是很容易的事，但要设置边框圆角的渐变效果就需要费些功夫了，需要正确理解几个CSS属性的含义，background-origin,background-clip,background-size这几个是必须用到的，调整好性能的数值就可以灵活运用了。

想要实现CSS圆角渐变并匹配内容背景图可以参考以下代码：

<style>
div {
 width: 500px;
 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(#FC0, #F30); 
}
.a1{display:block;height:280px;background-image:url(/images/school.jpg);
background-repeat:no-repeat;background-size:contain;}
</style>

<div>
<span class="a1">边框渐变色从内边框到边框，背景图像单独设置不重复。</span>
</div>

background-origin表示的是背景起始位置，其三个值如下，依次是

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

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

background-clip表示的是背景填充位置，其四个值如下，依次是

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

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

background-size表示的是背景尺寸，其五个值如下，依次是

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

信ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（页底留言开放，欢迎来吐槽）

● ● ●

1、半透明边框

难题：直接设置一个半透明的边框不起作用。

解决方案：padding-box盒模型border:10px solid rgba(255,255,255,.5);background: white;background-clip: padding-box;

2、多重边框

背景知识:box-shadow 的基本用法

box-shadow: X轴偏移量 Y轴偏移量 [模糊半径] [扩展半径] [阴影颜色] [投影方式];

解决方案一：

利用box-shadow的属性扩张半径background: 
yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
特点：box-shadow 方案只能模拟实线边框，会贴合元素的圆角

解决方案二：outline 方案background: yellowgreen;border: 10px solid #655;outline: 5px solid deeppink;特点：实现的“边框”不会贴合元素的圆角，可以实现虚线边框

3、灵活的背景定位

示例：实现一个背景图在div右下角，距离右边10px 下边10px 如图;

解决方案一：background-position扩展方案background: #58a url(code-pirate.svg) no-repeat bottom right;background-position: right 10px bottom 10px;

解决方案二：background-origin 方案padding: 10px;background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */background-origin: content-box;

解决方案三：calc 方案background: url("code-pirate.svg") no-repeat;background-position: calc(100% - 20px) calc(100% - 10px);

4、边框内圆角

两个div很容易实现，那么一个div呢？

解决方案：利用box-shadow和outlinebackground: tan;border-radius: .8em;padding: 1em;outline: .6em solid #655;box-shadow: 0 0 0 .4em #655; 

box-shadow的宽要小于outline宽度值，大于 (Math.sqrt(2)-1)r（这里的 r 表示 border-radius）

5、条纹背景

背景知识：CSS 线性渐变，background-size

案例一：等宽的双色水平条纹

background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;

案例二：不等宽的双色水平条纹

background: linear-gradient(#fb3 30%, #58a 0);background-size: 100% 30px;

案例三：三色水平条纹

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;

案例四：垂直条纹

background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);background-size: 30px 100%;

案例五：斜向条纹

失败方案：改变 background-size 的值和渐变的方向background: linear-gradient(45deg, #fb3 50%, #58a 0);background-size: 30px 30px;

正确方案：做到无缝拼接(60度的条纹不好做)background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;

优化方案：重复渐变做60度条纹background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);height:100%;

案例六：灵活的同色系斜向条纹

在大多数情况下，我们想要的条纹图案并不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系。

失败方案：没有任何浏览器支持下面这个特性background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);正确方案：不再为每种条纹单独指定颜色，而是把最深的颜色指定为背景色，同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹background: #58a;background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

6、复杂的背景图案

背景知识：CSS 渐变，“条纹背景”

CSS3 图案库lea.verou.me/css3patterns

7、伪随机背景

背景知识：CSS 渐变，“条纹背景”，“复杂的背景图案”

大自然不会以“无缝”贴片的方式重复自己......

蝉原则：通过质数来增加随机真实性

蝉渐变图案：条纹图案把不同尺寸的渐变图案叠加起来，并使用质数来增加随机的真实感

background: hsl(20, 40%, 90%);background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);background-size: 41px 100%, 61px 100%, 83px 100%;

8、连续的图像边框

背景知识：CSS 渐变，基本的 border-image，“条纹背景”，基本的 CSS 动画案例一：一个元素有一圈装饰性的边框，基本上就是一张图片被裁剪进了边框所在的方环区域。不仅如此，我们还希望这个元素的尺寸在扩大或缩小时，这幅图片都可以自动延伸并覆盖完整的边框区域。

最简单的办法是使用两个HTML 元素：一个元素用来把我们的石雕图片设为背景，另一个元素用来存放内容，并设置纯白背景，然后覆盖在前者之上。问题来了：如果只用一个元素，我们能做到这个效果吗？

解决方案：padding: 1em;border: 1em solid transparent;background:linear-gradient(white, white) padding-box,url(stone-art.jpg) border-box 0 / cover;

案例二；老式信封样式的边框

案例三：蚂蚁行军边框

@keyframes ants { to { background-position: 100% } }.marching-ants {padding: 1em;border: 1px solid transparent;background:linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;animation: ants 12s linear infinite;}

案例四：边框的裁切效果，用来模拟传统的脚注

border-top: .2em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: 1em;

干货！免费领取腾讯高级讲师网页设计教程

点我领取

☝☝☝

关注网页设计自学平台，99%的努力都在这里

▼无法识别二维码可以点「阅读原文」噢！