CSS Secrets边框技巧_H5之家 - 中国HTML5教程资源分享第一站

最近在阅读CSS Secrets这本书，我在阅读的过程中，将这些技巧也整理出来，并且按照自己的理解制作简单的demo。

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0;}

body{box-sizing:border-box;padding-bottom: 50px;position: relative;height: 100%;color: #37474F;}

footer{position: fixed;right: 10%;bottom: 0;font-size: 16px;color: #666;}

ol li{line-height: 1.5;}

ol li p{margin: 0;}

h2{margin-top: 30px;}

h3{margin-top: 20px;}

h4{font-style: italic;margin-top: 15px;}

code{color: #EC407A;line-height: 1.5;background: #F5F5F5;padding: 5px;white-space: nowrap;}

.wrap{width: 80%;margin: 0 auto;}

@media screen and (max-width: 1100px) {

.demo-wp{flex-direction: column;}

.demo{margin-top: 30px;}

footer{position: absolute;}

}

.demo-wp{display: flex;justify-content: space-around;align-items: center;line-height: 1;font-size: 12px;}

.demo{flex-basis: 25%;display: flex;flex-direction: column;width: 100%;}

.demo>div{height: 100px;box-sizing:border-box;display: flex;align-items: center;justify-content: center;}

/* 半透明边框 */

.borderOpacity .demo{background: red;padding: 20px;}

.borderOpacity .border{padding: 15px;border: 20px solid hsla(0,0%,100%,.5);background: #BBDEFB;}

.borderOpacity .border1{background-clip: ;}

.borderOpacity .border2{background-clip: padding-box;}

.borderOpacity .border3{background-clip: content-box;}

/* 半透明边框 end */

/* 多重边框 */

.borderMultiple .demo>div,.borderMultiple .demo code{margin: 30px 50px;}

.borderMultiple .demo code{margin-top: 0;}

/* 多重边框 box-shadow */

.borderShadow .bdSd1{box-shadow: 0 0 0 10px #03A9F4;}

.borderShadow .bdSd2{padding: 10px;box-shadow: 0 0 0 10px #03A9F4 inset;}

.borderShadow .bdSd3{box-shadow: 0 0 0 10px #BBDEFB, 0 0 0 15px #4FC3F7, 0 0 0 25px #03A9F4;}

.borderShadow .bdSd4{padding: 25px;box-shadow: 0 0 0 10px #BBDEFB inset,0 0 0 15px #4FC3F7 inset,0 0 0 25px #03A9F4 inset;}

/* 多重边框 box-shadow end */

/* 多重边框 outline */

.borderOutline .bdOutline{border: 10px solid #BBDEFB;}

.borderOutline .bdOutline1{outline: 5px solid #03A9F4;}

.borderOutline .bdOutline2{outline: 5px dashed #03A9F4;}

.borderOutline .bdOutline3{outline: 5px solid #03A9F4;border: 4px dashed #BBDEFB;}

.borderOutline .bdOutline4{outline: 5px solid #03A9F4;border-radius: 10px;}

/* 多重边框 outline end */

/* 多重边框 end */

/* 边框内圆角 */

.doubleDiv .inRound1{background: #03A9F4;padding: 5px;}

.doubleDiv .inRound1>div{background: #BBDEFB;border-radius: 10px;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}

.singleDiv .inRound2{background: #BBDEFB;border-radius: 10px;padding: 5px;outline: 5px solid #03A9F4;box-shadow:0 0 0 5px #03A9F4;margin-bottom: 20px;}

/* 边框内圆角 end */

</style>

</head>

<body>

<div>

<h2>1、半透明边框</h2>

<div>

<div>

<p>background-clip:border-box</p>

</div>

<div>

<p>background-clip:padding-box</p>

</div>

<div>

<p>background-clip:content-box</p>

</div>

</section>

</article>

<h3>2.1 box-shadow</h3>

<div>

<div>

<div class="bdSd bdSd1"><p>一个边框且在元素外部</p></div>

<code>box-shadow: 0 0 0 10px #03A9F4;</code>

</div>

<div>

<div class="bdSd bdSd2"><p>一个边框且在元素内部</p></div>

<code>padding: 10px;<br>box-shadow: 0 0 0 10px #03A9F4 inset;</code>

</div>

<div>

<div class="bdSd bdSd3"><p>多个边框且在元素外部</p></div>

<code>box-shadow: 0 0 0 10px #BBDEFB,<br>      0 0 0 15px #4FC3F7,<br>      0 0 0 25px #03A9F4;</code>

</div>

<div>

<div class="bdSd bdSd4"><p>多个边框且在元素内部</p></div>

<code>padding: 25px;<br>box-shadow: 0 0 0 10px #BBDEFB inset,<br>      0 0 0 15px #4FC3F7 inset,<br>      0 0 0 25px #03A9F4 inset;</code>

</div>

</section>

<h3>2.2 outline</h3>

<div>

<div>

<code>outline: 5px solid #03A9F4;</code>

</div>

<div>

<div class="bdOutline bdOutline2"><p>带虚线的两重边框</p></div>

<code>outline: 5px dashed #03A9F4;</code>

</div>

<div>

<div class="bdOutline bdOutline3"><p>带虚线的两重边框</p></div>

<code>outline: 5px solid #03A9F4;<br>border: 4px dashed #BBDEFB;</code>

</div>

<div>

<div class="bdOutline bdOutline4"><p>带圆角的边框</p></div>

<code>outline: 5px solid #03A9F4;<br>border-radius: 10px;</code>

</div>

</section>

</article>

<h2>3 边框内圆角</h2>

<div>

<h3>3.1 利用两个div</h3>

<div>

<div>

<code>