助你美化网站的实用css3技巧（2）

CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

.simpleBlock {
width: calc(100% - 100px);
}

.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}

文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

禁止鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

盒子效果

下面的代码可以实现一个漂亮的盒子效果：

p {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
}

自定义滚动条

过去一直都只有 IE 才能设置滚动条样式，现在好了，Webkit 也提供了设置滚动条的属性：

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: none;
}

::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(left, #547c90, #002640);
border: 1px solid #333;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

模糊文本

.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}