微信IDWEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

(页底留言开放,欢迎来吐槽)

● ● ●

1、半透明边框

css图像边框代码(CSS各种边框背景大全)(1)

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

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

2、多重边框

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

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

css图像边框代码(CSS各种边框背景大全)(2)

解决方案一:

利用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 如图;

css图像边框代码(CSS各种边框背景大全)(3)

解决方案一: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呢?

css图像边框代码(CSS各种边框背景大全)(4)

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

css图像边框代码(CSS各种边框背景大全)(5)

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

5、条纹背景

背景知识:CSS 线性渐变,background-size

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

css图像边框代码(CSS各种边框背景大全)(6)

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

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

css图像边框代码(CSS各种边框背景大全)(7)

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

案例三:三色水平条纹

css图像边框代码(CSS各种边框背景大全)(8)

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

案例四:垂直条纹

css图像边框代码(CSS各种边框背景大全)(9)

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

案例五:斜向条纹

css图像边框代码(CSS各种边框背景大全)(10)

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

css图像边框代码(CSS各种边框背景大全)(11)

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

css图像边框代码(CSS各种边框背景大全)(12)

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

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

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

css图像边框代码(CSS各种边框背景大全)(13)

失败方案:没有任何浏览器支持下面这个特性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 渐变,“条纹背景”

css图像边框代码(CSS各种边框背景大全)(14)

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%;

css图像边框代码(CSS各种边框背景大全)(15)

8、连续的图像边框

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

css图像边框代码(CSS各种边框背景大全)(16)

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

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

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

css图像边框代码(CSS各种边框背景大全)(17)

案例三:蚂蚁行军边框

css图像边框代码(CSS各种边框背景大全)(18)

@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;}

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

css图像边框代码(CSS各种边框背景大全)(19)

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

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

点我领取

☝☝☝

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

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

,