美化网站的实用 CSS3 技巧

黑白图像

.desaturate {filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
}

页面顶部阴影

::before {content: "";position: fixed;top: -10px;left: 0;width: 100%;height: 10px;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);z-index: 100;
}

CSS 实现三角形

.arrow-up {width: 0px;height: 0px;border-left: 5px solid transparent;/* left arrow slant */border-right: 5px solid transparent;/* right arrow slant */border-bottom: 5px solid #2f2f2f;/* bottom, add background color here */font-size: 0px;line-height: 0px;
}/* create an arrow that points down */
.arrow-down {width: 0px;height: 0px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #2f2f2f;font-size: 0px;line-height: 0px;
}/* create an arrow that points left */
.arrow-left {width: 0px;height: 0px;border-bottom: 5px solid transparent;/* left arrow slant */border-top: 5px solid transparent;/* right arrow slant */border-right: 5px solid #2f2f2f;/* bottom, add background color here */font-size: 0px;line-height: 0px;
}/* create an arrow that points right */
.arrow-right {width: 0px;height: 0px;border-bottom: 5px solid transparent;/* left arrow slant */border-top: 5px solid transparent;/* right arrow slant */border-left: 5px solid #2f2f2f;/* bottom, add background color here */font-size: 0px;line-height: 0px;
}

文字渐变

h1[data-text] {position: relative;color: #f51010;
}h1[data-text]::after {content: attr(data-text);z-index: 10;color: #f9fd04;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)));
}

盒子虚线边框效果

.box {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;
}.bg-yellow {		/**黄色**/background: #eccc30;box-shadow: 0 0 0 4px #eccc30, 2px 1px 6px 4px rgba(10, 10, 0, .5);-moz-box-shadow: 0 0 0 4px #eccc30, 2px 1px 4px 4px rgba(10, 10, 0, .5);-webkit-box-shadow: 0 0 0 4px #eccc30, 2px 1px 4px 4px rgba(10, 10, 0, .5);
}

模糊文本

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

右上角标签

.wrapper {margin: 50px auto;width: 280px;height: 370px;background: white;border-radius: 10px;-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);position: relative;z-index: 90;
}.ribbon-wrapper-green {width: 85px;height: 88px;overflow: hidden;position: absolute;top: -3px;right: -3px;
}.ribbon-green {font: bold 15px Sans-Serif;color: #333;text-align: center;text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);position: relative;padding: 7px 0;left: -5px;top: 15px;width: 120px;background-color: #BFDC7A;background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);color: #6a6340;-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}.ribbon-green:before,
.ribbon-green:after {content: "";border-top: 3px solid #6e8900;border-left: 3px solid transparent;border-right: 3px solid transparent;position: absolute;bottom: -3px;
}.ribbon-green:before {left: 0;
}.ribbon-green:after {right: 0;
}

<div class="wrapper"><div class="ribbon-wrapper-green"><div class="ribbon-green">推荐</div></div>
</div>