How to use 1 Pixel Vacancy in CSS to achieve fillet effect
This article mainly introduces how CSS uses 1-pixel vacancy to achieve fillet effect, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.
The code is as follows:
CSS uses 1 pixel vacancy to achieve fillet-like effect.
Body {padding:20px; font-family:arial; text-align:center;}
P, li {font-size: 12px; line-height:18px;}
H4 {margin-bottom:6px;}
.examplesGoHere {text-align:left; margin:0 auto;}
.letsGiveItAFixedWidthOf200Pixels {width:200px;}
Ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;}
Ul li {margin-bottom:8px; margin-left:0;padding-left:0;}
.notchedListItems a {
Display:block
Border: solid # 666
Border-width: 0 1px
Text-decoration: none
Outline:none
Color: # 000
Background: # e4e4e4
}
.notchedListItems a b {
Display: block
Position:relative
Top:-1px
Left: 0
Border:solid # 666
Border-width:1px 0 0
Font-weight:normal
}
.notchedListItems a b b {
Border-width:0 0 1px
Top: 2px
Padding:1px 6px
}
.notchedListItems a:hover
.notchedListItems a:hover b {background:#666;color:white;}
.feature {
Border:solid # 647aae
Border-width:0 1px
Background:#b0c0e6
}
.feature div {
Position:relative
Top:-1px
Left: 0
Border:solid # 647aae
Border-width:1px 0 0
}
.feature div div {
Top: 2px
Border-width:0 0 1px
Padding: .3em .3em .1em
}
Column example:
Home page of the website
Web page special effects
Software download
DIV area:
Although this program is not complicated, it can be used easily and is simple and practical.
For DELPHI enthusiasts, it has a very convenient report template design.
Can be used by printer, the program uses Access database and ReportBuilder 7.03 control
Run on Delphi 7. 0.
The effect is all right!
Thank you for reading this article carefully. I hope the article "how to use the 1-pixel vacancy of CSS to achieve fillet effect" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
