CSS揭秘 9.6分
读书笔记 第7页
山人Hilda

#Trick1 {

padding: .3em 2.8em; /* 审视哪些特征需要随字号改变 */

border: 2px solid rgba(0,0,0,.1); /* 用透明层叠加边框 */

border-top-width: 0; /* 相较给border写4个值,拆开更易修改 */

border-radius: 0.5em;

background: #58a linear-gradient(hsla(0,0%,100%,.2), transparent); /* 用透明层上渐变 */

box-shadow: 0 .05em .25em rgba(0,0,0,.5); /* 用透明层上阴影 */

color: white;

text-shadow: 0 -.05em .05em rgba(0,0,0,.5);

font-size: 100%;

line-height: 1.5; /* 行高依赖于字号, 用倍数 */

}

#Trick1:hover {

background-color: #c80; /* 因为边框,渐变皆为透明层叠加,所以改个背景色就能制造不同版本 */

}

#Trick2 {

padding: .3em 2.8em; border-radius: 0.5em;

background: transparent;font-size: 100%; line-height: 1.5;

color: crimson;

border: 2px solid currentColor; /* 使边框直接从字体取色! */

}

效果

0
《CSS揭秘》的全部笔记 4篇
豆瓣
我们的精神角落
免费下载 iOS / Android 版客户端