CSS3的常见边框汇总--CSS基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
height: 45px; border-radius: 90px 90px 0 0 / 45px 45px 0 0; }
/*半个竖着的椭圆*/ .item:nth-child(9) .border-radius {
width: 45px; border-radius: 45px 0 0 45px / 90px 0 0 90px; }
}
.main .item { width: 210px; height: 210px; margin: 0 30px 30px 0; display: flex; position: relative;
background-color: #FFF; float: left; box-shadow: 2px 2px 5px #CCC; }
CSS3 常见边框汇总
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>CSS3 边框</title> <style>
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0;
}
body { background-color: #F7F7F7;
}
.wrapper { width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box;
}
header { padding: 20px 0; margin-bottom: 20px; text-align: center;
/*阴阳图今生*/ .item:nth-child(21) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; border-radius: 90px; position: relative; }
/*圆右红透明色*/ .item:nth-child(18) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: transparent; border-right-color: red; border-radius: 90px; }
/*四分之一圆*/ .item:nth-child(5) .border-radius {
width: 90px; height: 90px; border-radius: 90px 0 0 0; }
/*横着的椭圆*/ .item:nth-child(6) .border-radius {
height: 90px; /*border-radius: 50%;*/ border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px; /*border-radius: 45px / 90px;*/ }
/*左上角圆饼*/ .item:nth-child(13) .border-radius {
width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 0 0; }
/*对角圆饼*/ .item:nth-child(14) .border-radius {
.item:nth-child(22) .border-radius::after, .item:nth-child(22) .border-radius::before {
/*圆右透明色*/ .item:nth-child(17) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red; border-right-color: transparent; border-radius: 90px; }
/*右透明色*/ .item:nth-child(16) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; border-right-color: transparent; }
width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 90px 0; }
/*四边不同色*/ .item:nth-child(15) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; }
/*四分之一竖着的椭圆*/ .item:nth-child(10) .border-radius {
width: 45px; height: 90px; border-radius: 45px 0 0 0 / 90px 0 0 0; }
/*饼环*/ .item:nth-child(11) .border-radius {
/*竖着的椭圆*/ .item:nth-child(7) .border-radius {
width: 90px; border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px; }
/*半个横着的椭圆*/ .item:nth-child(8) .border-radius {
border-radius: 45px; }
/*左阴阳*/ .item:nth-child(21) .border-radius::after {
background-color: red; border-color: green; }
/*右阴阳*/ .item:nth-child(21) .border-radius::before {
/*阴阳图前世2*/ .item:nth-child(20) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; /*border-right-color: red;*/ border-radius: 90px; }
background-color: green; border-color: red; right: 0; }
/*右阴阳*/ .item:nth-child(22) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-bottom-color: green; border-bottom-style: solid; background-color: red; border-radius: 90px; position: relative; }
}
.main .item:hover:after { background-color: rgba(170, 170, 170, 0.6); z-index: 100;
}
.main .item:nth-child(4n) { margin-richild(-n+5) { margin-bottom: 0;
}
header h3 { line-height: 1; font-weight: normal; font-size: 28px;
}
.main { /*overflow: hidden;*/
}
.main:after { content: ''; clear: both; display: block;
width: 40px; height: 40px;
border: 70px solid red; border-radius: 90px; }
/*圆饼*/ .item:nth-child(12) .border-radius {
width: 40px; height: 40px; border: 70px solid red; border-radius: 60px; }
.main .item:after { content: attr(data-brief); display: block; width: 100%; height: 100%; text-align: center; line-height: 210px; position: absolute; top: 0; left: 0; color: #FFF; font-family: '微软雅黑'; font-size: 18px; background-color: rgba(170, 170, 170, 0); z-index: -1; transition: all 0.3s ease-in;
.item:nth-child(21) .border-radius::after, .item:nth-child(21) .border-radius::before {
content: ''; position: absolute; top: 50%; width: 20px; height: 20px; /*margin: -10px 0 0 0;*/ border-width: 35px; border-style: solid;
}*/
/* 以上是骨架样式 */ /* 1、2、3、4 顺时针 */ .border-radius {
width: 180px; height: 180px; margin: auto; border: 1px solid red; /*border-radius: 50% 30% 20%;*/ }
}
/*半圆*/ .item:nth-child(3) .border-radius {
height: 90px; border-radius: 90px 90px 0 0; }
/*左上角*/ .item:nth-child(4) .border-radius {
/*height: 90px;*/ border-radius: 90px 0 0 0; }
/*阴阳图前世*/ .item:nth-child(19) .border-radius {
width: 180px; height: 0px; border-top-width: 90px; border-bottom-width: 90px; border-style: solid; border-top-color: red; border-bottom-color: green; /*border-right-color: red;*/ border-radius: 90px; }
.square { border-radius: 0;
}
/*拱形*/ .item:nth-child(1) .border-radius {
border-radius: 90px; }
/*拱形*/ .item:nth-child(2) .border-radius {
border-radius: 90px 90px 0 0;
/*半个竖着的椭圆*/ .item:nth-child(9) .border-radius {
width: 45px; border-radius: 45px 0 0 45px / 90px 0 0 90px; }
}
.main .item { width: 210px; height: 210px; margin: 0 30px 30px 0; display: flex; position: relative;
background-color: #FFF; float: left; box-shadow: 2px 2px 5px #CCC; }
CSS3 常见边框汇总
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>CSS3 边框</title> <style>
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0;
}
body { background-color: #F7F7F7;
}
.wrapper { width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box;
}
header { padding: 20px 0; margin-bottom: 20px; text-align: center;
/*阴阳图今生*/ .item:nth-child(21) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; border-radius: 90px; position: relative; }
/*圆右红透明色*/ .item:nth-child(18) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: transparent; border-right-color: red; border-radius: 90px; }
/*四分之一圆*/ .item:nth-child(5) .border-radius {
width: 90px; height: 90px; border-radius: 90px 0 0 0; }
/*横着的椭圆*/ .item:nth-child(6) .border-radius {
height: 90px; /*border-radius: 50%;*/ border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px; /*border-radius: 45px / 90px;*/ }
/*左上角圆饼*/ .item:nth-child(13) .border-radius {
width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 0 0; }
/*对角圆饼*/ .item:nth-child(14) .border-radius {
.item:nth-child(22) .border-radius::after, .item:nth-child(22) .border-radius::before {
/*圆右透明色*/ .item:nth-child(17) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red; border-right-color: transparent; border-radius: 90px; }
/*右透明色*/ .item:nth-child(16) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; border-right-color: transparent; }
width: 60px; height: 60px; border: 60px solid red; border-radius: 90px 0 90px 0; }
/*四边不同色*/ .item:nth-child(15) .border-radius {
width: 0px; height: 0px; border-width: 90px; border-style: solid; border-color: red green yellow blue; }
/*四分之一竖着的椭圆*/ .item:nth-child(10) .border-radius {
width: 45px; height: 90px; border-radius: 45px 0 0 0 / 90px 0 0 0; }
/*饼环*/ .item:nth-child(11) .border-radius {
/*竖着的椭圆*/ .item:nth-child(7) .border-radius {
width: 90px; border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px; }
/*半个横着的椭圆*/ .item:nth-child(8) .border-radius {
border-radius: 45px; }
/*左阴阳*/ .item:nth-child(21) .border-radius::after {
background-color: red; border-color: green; }
/*右阴阳*/ .item:nth-child(21) .border-radius::before {
/*阴阳图前世2*/ .item:nth-child(20) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-style: solid; border-bottom-color: green; background-color: red; /*border-right-color: red;*/ border-radius: 90px; }
background-color: green; border-color: red; right: 0; }
/*右阴阳*/ .item:nth-child(22) .border-radius {
width: 180px; height: 90px; border-bottom-width: 90px; border-bottom-color: green; border-bottom-style: solid; background-color: red; border-radius: 90px; position: relative; }
}
.main .item:hover:after { background-color: rgba(170, 170, 170, 0.6); z-index: 100;
}
.main .item:nth-child(4n) { margin-richild(-n+5) { margin-bottom: 0;
}
header h3 { line-height: 1; font-weight: normal; font-size: 28px;
}
.main { /*overflow: hidden;*/
}
.main:after { content: ''; clear: both; display: block;
width: 40px; height: 40px;
border: 70px solid red; border-radius: 90px; }
/*圆饼*/ .item:nth-child(12) .border-radius {
width: 40px; height: 40px; border: 70px solid red; border-radius: 60px; }
.main .item:after { content: attr(data-brief); display: block; width: 100%; height: 100%; text-align: center; line-height: 210px; position: absolute; top: 0; left: 0; color: #FFF; font-family: '微软雅黑'; font-size: 18px; background-color: rgba(170, 170, 170, 0); z-index: -1; transition: all 0.3s ease-in;
.item:nth-child(21) .border-radius::after, .item:nth-child(21) .border-radius::before {
content: ''; position: absolute; top: 50%; width: 20px; height: 20px; /*margin: -10px 0 0 0;*/ border-width: 35px; border-style: solid;
}*/
/* 以上是骨架样式 */ /* 1、2、3、4 顺时针 */ .border-radius {
width: 180px; height: 180px; margin: auto; border: 1px solid red; /*border-radius: 50% 30% 20%;*/ }
}
/*半圆*/ .item:nth-child(3) .border-radius {
height: 90px; border-radius: 90px 90px 0 0; }
/*左上角*/ .item:nth-child(4) .border-radius {
/*height: 90px;*/ border-radius: 90px 0 0 0; }
/*阴阳图前世*/ .item:nth-child(19) .border-radius {
width: 180px; height: 0px; border-top-width: 90px; border-bottom-width: 90px; border-style: solid; border-top-color: red; border-bottom-color: green; /*border-right-color: red;*/ border-radius: 90px; }
.square { border-radius: 0;
}
/*拱形*/ .item:nth-child(1) .border-radius {
border-radius: 90px; }
/*拱形*/ .item:nth-child(2) .border-radius {
border-radius: 90px 90px 0 0;