[CSS] CSS-Secrets Learning #4
Description
发现一本CSS好书，学习并且记录一下。
圆点背景
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;demo: http://codepen.io/guifangzhang/pen/EWVwYO
半透明边框
background: #fff;
border: 10px solid hsla(0,0%,100%,.5);
background-clip: padding-box; /*默认状态下，背景会延伸到边框的区域下层*/demo: http://codepen.io/guifangzhang/pen/LWpLXO
一个元素实现边框内圆角
background: tan;
border-radius: .8em;
box-shadow: 0 0 0 .34em #655; /* 会贴着圆角 0.8(根号2 - 1)*/
outline: .6em solid #655; demo: http://codepen.io/guifangzhang/pen/evpXBO
条纹背景
tag: linear-gradient background-size
水平条纹
background: linear-gradient(#fb3 20%, #58a 80%);
background-size: 100% 30px;demo: http://codepen.io/guifangzhang/pen/QpjePd
垂直条纹/斜条纹
demo: http://codepen.io/guifangzhang/pen/RprbBG
复杂背景
background: white;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 40px 30px; background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;/* 两幅网格叠加 */
background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px, 75px 75px,
15px 15px, 15px 15px; background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;/* 两层圆点阵列图案，并把它们的背景定位错开 */
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;优化
/*使用预处理器，把它转换成这个mixin */
@mixin polka($size, $dot, $base, $accent) { SCSS
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
/*调用*/
@include polka(30px, 30%, #655, tan);
}