Home >Web Front-end >HTML Tutorial >Pure CSS DIV rounded corner effect_html/css_WEB-ITnose
Pure CSS DIV rounded corner effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:531640browse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>最原始的圆角框</title><style type="text/css">*{margin:0;padding:0;font-size:12px;}.wrapper{width:80%;margin:0 auto;}/*通用样式--容器宽度值*/.sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}.sharp .content div{padding:10px;text-indent:2em;}.content{height:180px;}h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}/*上圆角框通用设置样式，如果要运用多个不同颜色，以下6句不用重新变化--------------------------------*/.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}.b1,.b8{margin:0 5px;}.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}/*颜色方案一,蓝色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}.color1 .b1,.color1 .b8{background:#96C2F1;}/*背景色*/.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}/*颜色方案二,绿色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .content{border-color:#9BDF70;}.color2 .b1,.color2 .b8{background:#9BDF70;}/*背景色*/.color2 .b2,.color2 .b3,.color2 .b4,.color2 .b5,.color2 .b6,.color2 .b7,.color2 .content{background:#F0FBEB;}/*颜色方案三,绿色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color3 .b2,.color3 .b3,.color3 .b4,.color3 .b5,.color3 .b6,.color3 .b7,.color3 .content{border-color:#BBE1F1;}.color3 .b1,.color3 .b8{background:#BBE1F1;}/*背景色*/.color3 .b2,.color3 .b3,.color3 .b4,.color3 .b5,.color3 .b6,.color3 .b7,.color3 .content{background:#EEFAFF;}/*颜色方案四,绿色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color4 .b2,.color4 .b3,.color4 .b4,.color4 .b5,.color4 .b6,.color4 .b7,.color4 .content{border-color:#E3E197;}.color4 .b1,.color4 .b8{background:#E3E197;}/*背景色*/.color4 .b2,.color4 .b3,.color4 .b4,.color4 .b5,.color4 .b6,.color4 .b7,.color4 .content{background:#FFFFDD;}/*颜色方案五,粉色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color5 .b2,.color5 .b3,.color5 .b4,.color5 .b5,.color5 .b6,.color5 .b7,.color5 .content{border-color:#F8B3D0;}.color5 .b1,.color5 .b8{background:#F8B3D0;}/*背景色*/.color5 .b2,.color5 .b3,.color5 .b4,.color5 .b5,.color5 .b6,.color5 .b7,.color5 .content{background:#FFF5FA;}/*颜色方案六,黄色边框----------------------------------------*//*下面第一、二句决定边框颜色，第三句决定背景颜色*//*边框色*/.color6 .b2,.color6 .b3,.color6 .b4,.color6 .b5,.color6 .b6,.color6 .b7,.color6 .content{border-color:#FFCC00;}.color6 .b1,.color6 .b8{background:#FFCC00;}/*背景色*/.color6 .b2,.color6 .b3,.color6 .b4,.color6 .b5,.color6 .b6,.color6 .b7,.color6 .content{background:#FFFFF7;}</style></head><body><div class="wrapper"> <!--风格一，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color1"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案一</h3> <div>这是最基本的圆角框，无图片，四个圆角全部采用标签绘制，兼容所有浏览器，无HACK，使用时只需添加一个class = " color1 "即可，下面的所有颜色方案你可以灵活自定义。 <br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> <!--风格二，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color2"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案二</h3> <div>class = " color2 " <br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> <!--风格三，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color3"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案三</h3> <div>class = " color3 " <br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> <!--风格四，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color4"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案四</h3> <div>class = " color4 " <br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> <!--风格四，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color5"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案五</h3> <div>class = " color5 " <br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div> <!--风格四，只需要变换一个CLASS就可以换一种颜色--> <div class="sharp color6"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h3>纯css圆角框换肤方案六</h3> <div>class = " color6 " <br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b> </div></div></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS DIV naming rules_html/css_WEB-ITnoseNext article：CSS DIV naming rules_html/css_WEB-ITnose