《响应式Web设计-HTML5和CSS3实战》阅读笔记第六章

概要

总结

文字阴影 text-shadow

/*文字阴影*/.textshadow p:first-child {    /*右侧阴影 下方阴影 模糊距离 阴影颜色*/    text-shadow: 1px 1px 1px #cccccc;}

支持HEX,HSL,RGB颜色

/*支持HEX,HSL,RGB颜色*/.textshadow :nth-child(2) {    text-shadow: 4px 4px 4px hsla(140, 3%, 26%, 0.4);}

支持px,em,rem单位

.textshadow :nth-child(3) {    text-shadow: 0.1em 0.1em 0 #d7d7d7;}

取消阴影

.textshadow em {    text-shadow: none;}

浮雕文字阴影效果

.textshadow :nth-child(4) {    text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);}

多重文字阴影

.textshadow :nth-child(5) {    text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75), 4px 4px 4px hsla(140, 3%, 26%, 0.4);}

盒阴影

.boxshadow div:first-child {    /*右侧阴影 下方阴影 模糊距离 阴影颜色*/    -ms-box-shadow: 4px 4px 2px #ccc;    -webkit-box-shadow: 4px 4px 2px #ccc;    box-shadow: 4px 4px 2px #ccc;}

内阴影

.boxshadow :nth-child(2) {    -ms-box-shadow: inset 0 0 10px #000;    -webkit-box-shadow: inset 0 0 10px #000;    box-shadow: inset 0 0 10px #000;}

多重阴影

.boxshadow :nth-child(3) {    -ms-box-shadow: inset 0 0 10px hsl(0, 0%, 0%),    inset 0 0 15px hsla(0, 97%, 53%, 1);    -webkit-box-shadow: inset 0 0 10px hsl(0, 0%, 0%),    inset 0 0 15px hsla(0, 97%, 53%, 1);    box-shadow: inset 0 0 10px hsl(0, 0%, 0%),    inset 0 0 15px hsla(0, 97%, 53%, 1);}

背景渐变（渐变生成器：http://www.colorzilla.com/gradient-deitor/）

线性背景渐变

.bggradient :nth-child(1) {    /*渐变方向，渐变起始颜色 渐变起始位置，过渡颜色 过渡颜色位置，渐变结束颜色 渐变结束位置 */    background: linear-gradient(90deg, #fff 0%, #e4e4e4 50%, #fff 100%);}

径向渐变

.bggradient :nth-child(2) {    /* 渐变形状 ，渐变起始颜色 起始渐变位置，过渡颜色 过渡渐变位置，渐变结束颜色 结束渐变位置*/    background: radial-gradient(circle, #fff 40%, #e4e4e4 60%, #000 100%);}

重复渐变

.bggradient :nth-child(3) {    background: -webkit-repeating-radial-gradient(circle, white, lightblue 10%);    background: -ms-repeating-radial-gradient(circle, white, lightblue 10%);    background: repeating-radial-gradient(circle, white, lightblue 10%);}

背景渐变图案（http://lea.verou.me/css3patterns/）

.bggradient :nth-child(4) {    background: linear-gradient(45deg, #92baac 45px, transparent 45px) 64px 64px,    linear-gradient(45deg, #92baac 45px, transparent 45px, transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),    linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px, #92baac 68px, #92baac 113px, transparent 113px, transparent 158px, #92baac 158px);    background-color: #e1ebbd;    background-size: 128px 128px;}

多重背景图片

body {    background: url(../../images/oscar.png) top right no-repeat,    url(../../images/bg.jpg) bottom left no-repeat;    /*    auto使用图片的原始大小；cover按照原始图片的长宽等比缩放以填充整个区域；contain按照原始图片的长宽等比缩放使其较长的一边适应元素大小；    顺序对应图片顺序    */    background-size: auto, contain;}

可缩放图标

使用@font-face制作可缩放图标

@font-face {    font-family: fontawesome;    font-weight: normal;    font-style: normal;    src: url('../../images/fontawesome.eot');    /* IE9*/    src: url('../../images/fontawesome.eot#iefix') format("eot"),    url('../../images/fontawesome.woff') format("woff"),    url('../../images/fontawesome.ttf') format("truetype"),    url('../../images/fontawesome.svg#fontawesome') format("svg");    /*  iOS 4.1- */}.icon {    font-family: fontawesome;    -webkit-font-smoothing: antialiased;}.icon :nth-child(1):before {    content: "";    color: red;    font-size:12px;}.icon :nth-child(2):before {    content: "";    color: blue;    font-size:24px;}