CSS揭秘读书笔记 （一）

CSS揭秘读书笔记      （一）

一、半透明边框

1. 要想实现半透明边框可以使用border：

　　

div{

   border: 10px  solid  hsla(0,0%,100%,.5);

　　background:white;

　　background-clip:padding-box;
}

　　

①  hsla：h是色调，取值范围是0-360。s是饱和度，取值范围是0%-100%。l是亮度，取值范围是0%-100%。a是透明度，取值范围是0-1。

② background-clip：用于调整背景图的显示区域，有3个值，border-box：背景图延伸在边框后面。padding-box：背景图不出现在内边距区域，不出现在边框后面。content-box：背景图只出现在内容后面，不出现在内边距和边框后面。

 

二、多重边框

1. 使用box-shadow(支持IE9),即多重投影：

　　

div{
     background:yellow;

　　  box-shadow:  0 0 0 10px #655,

               　　　　 0 0 0 15px deeppink,

                     　　 0 2px 5px 15px rgba(0, 0, 0, .6);
}

　　

 

 

　　2. 使用outline(支持IE8)：

　　outline：与border类似但是不占空间，即不会被算入元素的高宽中。但这种解决方案只适用于双层边框，而且边框不一定会贴合border-radius属性产生的圆角

　　　background-color: greenyellow;

　　　border: 10px solid #655;

         outline: 5px solid deeppink;

 

 

 

三、灵活的背景定位

　　我们可以通过指定背景图片对任意角的偏移量来灵活的展现背景，背景下载图片地址：http://csssecrets.io/images/code-pirate.svg

　　1. 以下代码使得背景图片永远处于内容的最右下角，而不是背景颜色的最下角，位置可以随padding的改变而改变。

　　

div{
    padding: 30px;

　　 background: url(../img/code-pirate.svg) no-repeat right bottom #58a;

    background-origin: content-box; // 使用内容宽度
}

　　

 

　　2. 使用calc()方案，部分支持IE。

　　以下代码会使图片定位在距离背景颜色的右边20px，距离底部10px。记住在calc函数中运算符号两边必须有空格，否则会错误。

　　

div{
   padding: 30px;

　　background: url(../img/code-pirate.svg) no-repeat #58a;

　　background-position: calc(100% - 20px) calc(100% - 10px);
}

　　

 

 

四、边框内圆角

1. 使用两个元素达成效果

　　　　

　　　　


      　　　　

                　　　　    我有一些很好看的内部圆边，外部直边不是吗？
    　　　　  

　　　　

　　　　.something-meaningful {

      　　　　 width: 15rem;

      　　　　 height: 5rem;

      　　　　 background-color: #655;

     　　　　  padding: .8rem;

　　　　}

　　　　.something-meaningful>div {

     　　　　  background: tan;

   　　　　    border-radius: .8rem;

   　　　　    padding: 1rem;

　　　　}

　　

 

 

　　2. 使用1个元素达成效果,同时使用outline和box-shadow来达成效果，其中描边的取值至少是border-radius值的(√2 – 1)，因为(√2 – 1) < 0.5 ,所以可以直接取一半，以下面代码为例，box-shadow和-outline的值至少要是0.4rem，我取了0.6rem。

　　　　

　　　　　

          　　　　我有一些很好看的内部圆边，外部直边不是吗？
    　　　

　　　　.something-meaningful {

     　　　　 width: 15rem;

   　　　　   height: 5rem;

   　　　　   background-color: #655;

    　　　　  background: tan;

    　　　　  border-radius: .8rem;

    　　　　  padding: 1rem;

   　　　　   outline: .6rem solid #655;

     　　　　 box-shadow: 0 0 0 .6em #655;

　　　　}

　　

 

五、条纹背景

　　　1. 横向条纹：

　　　

　　　.linear-gra {
　　　　　　background: linear-gradient(#fb3 30%,#58a 30%,#58a 60%,greenyellow 0);
　　　}

　　

可以使用0来减少重复输入，因为如果某个色标的位置值比整个列表中在他之前的色标位置值都小，则该色标的位置会被设置为他前面所有色标位置值的最大值。

 

　　2. 垂直条纹：加一个90deg

　　　　

　　.linear-gra {
 　　　　　　background: linear-gradient(90deg, #fb3 30%, #58a 30%,#58a 60%,greenyellow 0);
　　}

　　

 

 

 

　　3. 60度间隔条纹背景：

　　　　　　

　　.linear-gra {      　　　　
　　　　    background: repeating-linear-gradient(60deg,#fb3,#fb3 15px,#58a 0,#58a 30px);
　　　}

　　

可以使用repeating-linear-gradient 来进行重复，色标是无限循环的

 

　　4. 30度同色系条纹背景：

　　

　　.linear-gra {
    　　   background: #58a;
　　　　 background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1),hsla(0, 0%, 100%, .1) 15px,transparent 0, transparent 30px);
　　}

　　

　　同色系的条纹可以使用hsla来进行简化