html设置文本的下划线效果,CSS3 自定义文本下划线样式

CSS

语言：

CSSSCSS

确定

body {

background: #165578;

}

.wrapper {

width: 500px;

margin: 0 auto;

}

h1 {

color: white;

display: inline;

border-bottom: 3px solid #0e364d;

padding-bottom: 8px;

line-height: 1.75em;

}

h1:after,

h1:before {

content: "";

display: block;

margin: 1em 0;

}

.fancy {

border-width: 0 0 5px;

border-style: solid;

-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;

-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;

border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;

}

.fancy2 {

box-shadow: 0px 7px 5px -2px rgba(0, 0, 0, 0.3);

}

.fancy3 {

background-color: #124662;

}

.fancy4 {

border-width: 0 0 5px;

border-style: solid;

-webkit-border-image: -webkit-linear-gradient(45deg, #0d3349, #155274) 10% round;

-o-border-image: linear-gradient(45deg, #0d3349, #155274) 10% round;

border-image: linear-gradient(45deg, #0d3349, #155274) 10% round;

}