半透明边框
background-clip
background-clip: border-box|padding-box|content-box; 默认是 border-box. 该属性规定背景的绘制区域, 通俗点讲就是, 能背景可以延伸的范围, 三个属性值从字面上不难理解, 分别是可延伸到, border,padding,content.
RGBA/HSLA
分别为 RGB/HSL, 加上透明度 A, 值为 0~1.
将背景绘制范围设为 padding-box, 边框设置为透明色, 即可实现效果. 实现方案:
- .translucent-borders{
- width: 300px;
- height: 300px;
- padding:10px;
- border:10px solid hsla(0,0%,100%,.5);
- background-color: #fff;
- background-clip:padding-box;
- }
多重边框
上图多边框可使用 box-shadow 实现, 有一个缺点就是只能设置实线.
需要注意使用 box-shadow 制作'假'边框, 不会影响布局, 而且也不会受到 box-sizing 属性的影响, 所以在实际使用中, 需要注意为这些'假'边框留出位置, 可以使用 margin 或者 padding 配合 inset(向内绘制)来解决.
box-shadow 支持逗号分隔语法, 我们 可以创建任意数量的投影.
实现方案:
- .multiple-borders{
- width: 200px;
- height: 200px;
- padding:10px;
- box-sizing: border-box;
- /*border:10px solid red;*/
- border-radius: 10px;
- margin:50px;
- background: pink;
- box-shadow:
- 0 0 0 10px red,
- 0 0 0 10px blue,
- 0 0 0 20px green ,
- 0 0 0 30px purple,
- 0 2px 15px 40px rgba(0,0,0,.6);
- }
如上图, 如果只是需要两层边框, 当然我们还可以使用 outline 来实现, 因为 outline 并不能 接受用逗号分隔的多个值. 所以只可以实现两层边框.
我们可以 outline-offset 属性来控制它跟元素边缘之间的间距, 这个属性甚至可以接受负值, 来实现上图的缝边效果.
实现方案:
- .outline-borders{
- width: 200px;
- height: 200px;
- padding:25px;
- background: yellowgreen;
- outline: 2px dashed #fff;
- outline-offset: -15px;
- }
注意: outline 有个 bug, 边框不一定会贴合 border-radius 产生的圆角, 如下图, 所以如果是有圆角, 需要配合 box-shadow 来填补间隙.
灵活的背景定位
很多时候, 我们想针对容器某个角对背景图片做偏移定位. 在 CSS 2.1 中, 我们只能指定距离左上角的偏移量, 或者干脆完全靠齐到其 他三个角. 但是, 我们有时希望图片和容器的边角之间能留出一定的空隙, (类似内边距的效果), 如上图(距离右边 20px, 下边 20px), 这时候我们就可以使用 css3 中提供的以下方案.
background-position 的扩展语法方案
在 CSS 背景与边框 (第三版)( http://w3.org/TR/css3-background ) 中, background-position 属性已经得到扩展, 它允许我们指定背景图片距离任 意角的偏移量, 只要我们在偏移量前面指定关键字.
实现方案:
- .background-position{
- width: 200px;
- height: 200px;
- padding: 10px;
- color:#FFF;
- background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat blue;
- background-position: right 20px bottom 20px;
- }
background-origin 方案
在给背景图片设置距离某个角的偏移量时, 如果是上图这种情况: 偏移量与容器的内边距一致. 如果采用上面提到的 background-position 的扩展语法方案, 代码不够 DRY, 我们可以使用 background-origin, 改变背景的相对定位, 让它自动地跟着我们设定的内边距走, 不用另外声明偏移量的值.
注: 如果背景图像的 background-attachment 属性为 "fixed", 则该属性没有效果.
实现方案:
- .background-origin{
- margin: 20px;
- width: 200px;
- height: 200px;
- padding: 10px;
- border:10px solid red;
- color:#FFF;
- background: url(http://csssecrets.io/images/code-pirate.svg) right bottom no-repeat blue;
- background-origin: content-box;
- }
calc() 方案
请不要忘记在 calc() 函数 内部的 - 和 + 运算符的两侧各加 一个空白符, 否则会产生解析错误!
该方案就是使用 calc()直接计算出距离左上角的位置, 设置给 background-position 即可.
实现方案:
- .calc{
- width: 200px;
- height: 200px;
- padding: 10px;
- color:#fff;
- background: url(http://csssecrets.io/images/code-pirate.svg) calc(100% - 10px) calc(100% - 10px) no-repeat blue;
- }
边框内圆角
上图可通过上文提到的 outline 无法贴合圆角配合 box-shadow 实现. box-shadow 的扩展半径为圆角半径的一半即可.
实现方案:
- .inner-rounding{
- width: 200px;
- height: 200px;
- padding:10px;
- background: hotpink;
- border-radius: 10px;
- outline:10px solid purple;
- box-shadow: 0 0 0 5px purple;
- margin: 30px;
- }
条纹背景
实现条纹背景主要使用的就是 linear-gradient()这个渐变属性.
根据 css3 规范, 如果某个色标的位置值比整个列表中在它之前的色标的位置都要小, 则该色标的位置值会被设置为他前面所有色标位置值的最大值. 只需修改前面的值.
给出实现方案:
- /* 水平条纹 */
- .horizontal-stripes{
- width: 200px;
- height: 200px;
- background: linear-gradient(red 50%, green 0);
- background-size: 100% 30px;
- }
- /* 垂直条纹 */
- .vertical-stripes{
- width: 200px;
- height: 200px;
- background: linear-gradient(90deg, red 50%, green 0);
- background-size: 30px 100%;
- }
- /* 只能 45 度 */
- .diagonal-stripes{
- width: 200px;
- height: 200px;
- background: linear-gradient(45deg, red 25%, green 0,green 50%, red 0,red 75%,green 0);
- /* 记得乘以根号 2 */
- background-size: 42px 42px;
- }
- /* 任意度数 */
- .better-diagonal-stripes{
- width: 200px;
- height: 200px;
- background: repeating-linear-gradient(60deg,red, red 15px, green 0, green 30px );
- background: repeating-linear-gradient(30deg,pink 0 15px, blue 0 30px, green 0 45px); /* 简写 */
- }
- /* 同色系条纹 */
- .subtle-stripes{
- width: 200px;
- height: 200px;
- background-color: blue;
- background-image: repeating-linear-gradient(45deg, hsla(0,0%,100%,.3) 0 15px, transparent 0 30px);
- }
复杂的背景图案
实现方案:
- .Polka{
- width: 200px;
- height: 200px;
- background: #655;
- background-image:
- radial-gradient(pink 20%, transparent 0),
- radial-gradient(pink 20%,transparent 0);
- background-size: 30px 30px;
- background-position: 0 0, 15px 15px;
- }
实现方案:
- .blueprint{
- width: 200px;
- height: 200px;
- background-color: skyblue;
- background-image:
- linear-gradient(#fff 2px, transparent 0),
- linear-gradient(90deg,#fff 2px, transparent 0),
- linear-gradient(#fff 1px, transparent 0),
- linear-gradient(90deg,#fff 1px, transparent 0);
- background-size:60px 60px,60px 60px,20px 20px,20px 20px;
- }
连续的图像边框
实现方案:
- .continuous-image-borders{
- width: 400px;
- height: 200px;
- border:20px solid transparent;
- padding:10px;
- background: linear-gradient(#fff,#fff) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box;
- background-size: cover;
- }
实现方案:
- .vintage-envelope{
- width: 300px;
- height: 200px;
- padding:10px;
- border:10px solid transparent;
- background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0 15px, transparent 0 30px,blue 0 45px, transparent 0 60px) border-box;
- }
来源: https://juejin.im/post/5c1f9a7e5188252ea66b4044