html边框有缺口,html+CSS实例效果(3):1个像素缺口加变色按钮

google analytics buttons

body { padding:20px; font-family:arial; text-align:center; } p, li { font-size: 12px; line-height:18px; } h3 { 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; }

/*---- notched effect for links in the unordered list ------*/

.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: 0px 6px; }

A list

• About
• Contact
• Cssrain

A div

This is an example of the notched corners as applied to a div container.

This is an example of the notched corners as applied to a div container.

This is an example of the notched corners as applied to a div container.

• CSS设计

运行代码

复制代码

另存代码

提示：您可以先修改部分代码再运行