border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了.... 图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
<h1<img src="widget-image.gif" alt="Buy widgets" /</h1
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1Buy widgets</h1
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：h1{background: url(widget-image.gif) no-repeat
height: image height
text-indent: -2000px}注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。...直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation{background: blue
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body{background: url(blue-image.gif) 0 0 repeat-y}此时不能用em做单位，因为那样的话，一旦读者改变了字体大小
CSS:
.grup{
padding-top: 104px
position: relative
border-radius: 15px
margin-bottom: 217px
}
.grup .img{
width: 370px
height: 87px
position: absolute
top:-48px
margin-left: calc(50% - 185px)
z-index:999
background: linear-gradient(
115deg, /*背景分割倾斜角度*/
#fff 0%,
#fff 40%,
#3596EB 40%,
#3596EB 100%
)
border: 4px solid #3596EB
border-radius: 44px
}
.grup .img .coun{
display: flex
justify-content: space-around
}
.grup .img .coun div{
display: flex
line-height: 88px
}
.grup .img .coun .left{
color:#3596EB
font-size: 32px
letter-spacing: 3px
font-weight: 500
}
.grup .img .coun .right{
color:#fff
font-size: 28px
letter-spacing: 3px
font-weight: 500
}
HTML:
<div class="up grup">
<div class="img">
<div class="coun">
<div class="left">新建</div>
<div class="right">所有文集</div>
</div>
</div>
</div>
效果：
