CSS3之边框圆角的设置案例

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>模板</title>   <style>      body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {         margin: 0;         padding: 0;      }

body {         font-weight:bold;">#F7F7F7;      }

.wrapper {         width: 1000px;         margin: 0 auto;         padding: 20px;         box-sizing: border-box;      }

header {         padding: 20px 0;         margin-bottom: 20px;         text-align: center;      }

header h3 {         line-height: 1;         font-weight: normal;         font-size: 28px;      }

.main {         /*overflow: hidden;*/      }

.main:after {         content: ‘‘;         clear: both;         display: block;      }

.main .item {         width: 210px;         height: 210px;         margin: 0 30px 30px 0;         display: flex;         position: relative;         font-weight:bold;">#FFF;         float: left;         box-shadow: 2px 2px 5px #CCC;      }

.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;         font-weight:bold;">rgba(170, 170, 170, 0);         z-index: -1;         transition: all 0.3s ease-in;      }

.main .item:hover:after {         font-weight:bold;">rgba(170, 170, 170, 0.6);         z-index: 100;      }

.main .item:nth-child(4n) {         margin-right: 0;      }

/*.main .item:nth-last-child(-n+5) {         margin-bottom: 0;      }*/

/* 以上是骨架样式 */       .border-radius {         width: 180px;         height: 180px;         border: 1px solid #ff4da5;         margin: auto;      }      /* 整圆 */      .item:nth-child(1) .border-radius {         border-radius: 90px;      }

/* 拱形 */      .item:nth-child(2) .border-radius {         border-radius: 90px 90px 0 0;      }

      /* 半圆 */      .item:nth-child(3) .border-radius {         height: 90px;         border-radius: 90px 90px 0 0;      }

      /* 左上角 */      .item:nth-child(4) .border-radius {         border-radius: 90px 0 0 0;      }

      /* 四分之一圆 */      .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: 90px / 45px;      }

      /* 竖着的椭圆 */      .item:nth-child(7) .border-radius {         width: 90px;         border-radius: 45px / 90px;      }

      /* 横着的半椭圆 */      .item:nth-child(8) .border-radius {         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;      }

      /* 四分之一竖着的半椭圆 */      .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 {         width: 70px;         height: 70px;         border-width: 55px;         border-radius: 90px;      }

      /* 圆饼 */      .item:nth-child(12) .border-radius {         width: 70px;         height: 70px;         border-width: 55px;         border-radius: 45px;      }

      /* 左上角圆饼 */      .item:nth-child(13) .border-radius {         width: 70px;         height: 70px;         border-width: 55px;         border-radius: 90px 0 0 0;      }

      /* 对角圆饼 */      .item:nth-child(14) .border-radius {         width: 70px;         height: 70px;         border-width: 55px;         border-radius: 90px 0 90px 0;      }

      /* 四边不同色 */      .item:nth-child(15) .border-radius {         width: 0;         height: 0;         border-width: 90px;         border-color: red blueviolet greenyellow paleturquoise;      }

      /* 右边透明色 */      .item:nth-child(16) .border-radius {         width: 0;         height: 0;         border-width: 90px;         border-color: red blueviolet greenyellow paleturquoise;         border-right-color: transparent;      }

      /* 圆右透明色 */      .item:nth-child(17) .border-radius {         width: 0;         height: 0;         border-width: 90px;         border-color: red blueviolet greenyellow paleturquoise;         border-right-color: transparent;         border-radius: 90px;      }

      /* 圆右有色其他透明色 */      .item:nth-child(18) .border-radius {         width: 0;         height: 0;         border-width: 90px;         border-color: transparent;         border-right-color: blueviolet;         border-radius: 90px;      }

      /* 阴阳图前世 */      .item:nth-child(19) .border-radius {         width: 180px;         height: 0;         border-top-width: 90px;         border-bottom-width: 90px;         border-top-color: blueviolet;         border-bottom-color: yellow;         border-radius: 90px;      }

      /* 阴阳图今生 */      .item:nth-child(20) .border-radius {         width: 180px;         height: 90px;         border-bottom-width: 90px;         border-bottom-color: yellow;         font-weight:bold;">blueviolet;         border-radius: 90px;         position: relative;      }      .item:nth-child(20) .border-radius::after,      .item:nth-child(20) .border-radius::before {         content: ‘‘;         position: absolute;         top: 50%;         width: 20px;         height: 20px;         /*margin: -10px 0 0 0;*/         border-width: 35px;         border-style: solid;         /*border-radius: 45px;*/         border-radius: 45px;      }

/*左阴阳*/      .item:nth-child(20) .border-radius::after {         font-weight:bold;">blueviolet;         border-color: yellow;      }      /*右阴阳*/      .item:nth-child(20) .border-radius::before {         font-weight:bold;">yellow;         border-color: blueviolet;         right: 0;      }

      /* 消息框 */      .item:nth-child(21) .border-radius {         width: 160px;         height: 60px;         border-color: greenyellow;         font-weight:bold;">greenyellow;         border-radius: 10px;         position: relative;      }      .item:nth-child(21) .border-radius::before {         content: ‘‘;         width: 0px;         height: 0px;         border-width: 10px;         border-style: solid;         border-color: transparent;         border-right-color: greenyellow;         top: 10px;         left: -20px;         position: absolute;      }

      /* 奇怪的图形 */      .item:nth-child(22) .border-radius {         width: 40px;         height: 40px;         border-width: 40px 0 40px 60px;         border-style: solid;         border-color: aquamarine;         border-radius: 0 0 75px 0;      }

      /* qq消息框 */      .item:nth-child(23) .border-radius {         width: 160px;         height: 60px;         border-color: greenyellow;         font-weight:bold;">greenyellow;         border-radius: 10px;         position: relative;      }      .item:nth-child(23) .border-radius::after {         content: ‘‘;         width: 30px;         height: 30px;         border-width: 0 0 30px 30px;         border-style: solid;         border-color: transparent;         border-bottom-color: greenyellow;         border-radius: 0 0 75px 0;         position: absolute;         top: -10px;         right: -20px;      }

   </style></head><body>   <div class="wrapper">      <header>         <h3>模板</h3>      </header>      <div class="main">         <div class="item" data-brief="整圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="拱形">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="半圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="左上角">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="四分之一圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="横着的椭圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="竖着的椭圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="横着的半椭圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="竖着的半椭圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="四分之一竖着的椭圆">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="饼环">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="圆饼">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="左上角圆饼">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="对角圆饼">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="四边不同色">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="右边透明色">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="圆右边透明色">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="圆右边有色其他透明色">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="阴阳图前世">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="阴阳图今生">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="消息框">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="奇怪的图形">            <div class="border-radius"></div>         </div>         <div class="item" data-brief="qq消息框">            <div class="border-radius"></div>         </div>      </div>   </div></body></html>

原文地址：https://www.cnblogs.com/zlinger/p/9515110.html

时间： 2024-10-13 19:14:22

CSS3之边框圆角的设置案例的相关文章

CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :

css3(border-radius)边框圆角详解

传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari 5.Chrome 4和Firefox 4 一.border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").你为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可以使用:em.px.百分比等等. 比如,下面是一个d

css3实现边框圆角样式

基本语法: border-radius: 5px; 兼容大多数浏览器: /*兼容Mozilla(Firefox, Flock等浏览器)*/ -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; /*兼容WebKit (Safari, Chrome等浏览器)*/ -web

div css3 border-radius 之圆角 DIV圆角图片圆角

CSS3之border-radius圆角 DIV盒子圆角图片圆角,CSS3样式实现盒子对象圆角.图片圆角效果.div css3 border-radius圆角样式教程篇.一.css3单词与语法结构 - TOP(体感音乐床垫) 1.DIVCSS3圆角单词:border-radius 2.语法结构 div{border-radius:5px} 设置DIV对象盒子四个角5像素圆角效果 div{border-radius:5px 0;} 设置DIV对象盒子左上角和右下角5px圆角,其它两个角为0不圆角

CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

matrix CSS3 1. 圆角 border-radius:边框圆角的圆角半径四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角两个值:第一个值为左上角与右下角,第二个值为右上角与左下角一个值:四个圆角值相同 2.图片 border-image:有了CSS3的border-image属性,你可以使用图像创建一个边框:border-image属性允许你指定一个图片作为边框! 用于创建上

移动端H5 css3模拟边框最新研究(超实用) by FungLeo

移动端H5 css3模拟边框最新研究(超实用) by FungLeo 前言在之前写的一篇博文<移动端H5的一些基本知识点总结第五节边框的处理>中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷. 为什么要模拟边框,而不是直接写边框? 因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲. 因此,使用模拟边框的

ss3来实现边框圆角效果

经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能: 1 <div style=" border-top-left-ra

6种炫酷的CSS3按钮边框动画特效

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML结构该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式在CSS样式

UITableView中cell边框和背景设置最佳方案

UITableView是iOS开发中最常用的视图控件,在平常用的iOS App中大部分都用到了UITableView. 需求很简单,就是在一个UITableView里面实现一个不一样的UITableViewCell,如下图里的“切换账号”按钮正常情况下grouped样式(UITableViewStyleGrouped)UITableViewCell都是有边框的,所以如果只是用addSubView添加一个按钮的话,就会有边框在外面,不符合要求,也想过用一个大的图片,把这个cell给盖住,但是感觉