CSS3之边框圆角的设置案例

最新推荐文章于 2021-05-10 19:32:30 发布
最新推荐文章于 2021-05-10 19:32:30 发布
阅读量197 收藏 1
点赞数
原文链接：http://www.cnblogs.com/zlinger/p/9515110.html
版权 
<!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

weixin_34121282
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
无图片CSS圆角的五个实例
07-29
无图片 CSS 圆角的 五个实例
CSS border三角、圆角图形生成技术简介
weixin_34126215的博客
08-23 271
一、前言 利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。 二...
边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）
热门推荐
下雨打伞干嘛的博客
11-10 1万+
边框样式（border-style）: border-style属性可以控制边框的视觉样式，包含8种可用边框样式。 使用方法： p { border-style: groove; } 8种样式： solid： 实线边框，经典边框。 double： 双线边框，含有两条线。 groove： 槽线边框，看起来就像页面中的一个槽。 outset： 外凸边框，看起来就像从页面凸出来一样。 dotted： 虚线（点线）边框。 dashed： 破折线边框。 inset： 内凹边框，看起来像页面凹进去一样。 ridge
CSS3_边框属性之圆角的基本图形案例
08-11 112
一、正方形 div{ background:#F00; width:100px; height:100px;} 二、长方形 div{background:#F00;width:200px;height:100px;} 三、圆形 　　把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值...
CSS3彩色渐变圆角按钮特效
07-24
在本案例中，"CSS3彩色渐变圆角按钮特效"就是利用了CSS3的新特性来创建视觉吸引人的交互式按钮。CSS3的渐变功能允许我们在背景、边框等元素上创建平滑过渡的颜色效果，这在传统CSS2中是无法实现的。 接着，我们来看...
CSS3背景、边框和边距相关属性演示案例
01-27
`border-radius`用于设置边框圆角，如`border-radius: 10px;`创建一个圆角为10像素的元素。 CSS3的边距属性包括`margin`和`padding`。`margin`设置元素外边距，用于调整元素与其他元素之间的距离，例如`margin: 10...
CSS3实战与案例
01-24
CSS3支持圆角边框，使得按钮、图片框等元素可以变得更加美观。背景图片可以使用`background-size`来控制大小，`background-repeat`来决定是否重复，甚至可以用多个背景图片叠加。 此外，CSS3还引入了动画和过渡效果...
图解CSS3核心技术与案例实战pdf
05-16
2. **边框和背景**：CSS3允许使用圆角边框、多颜色渐变背景以及图片背景裁剪，极大地丰富了页面的视觉效果。比如，`border-radius` 属性可以创建无锯齿的圆角，而`background-image` 支持线性渐变和径向渐变。 3. *...
css3图标按钮边框发光特效
06-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是图标按钮的边框发光特效。这个特效在用户鼠标悬停时，可以使按钮边框产生动态的发光效果，提升用户体验并增加界面的...
CSS实现圆角的几个实例。
wonsoft的专栏
08-05 1028
CSS实现圆角的实例 实例1：　　利用标签的逐渐缩小,做成圆角的效果,主要是给标签用上了font-size;margin;border;display;height;这些属性。以下是CSS代码：#circle{  margin:50px auto;  width:300px;  overflow:hidden;  }.include{  backgr
CSS圆角边框，浮动（float）案例，常见网页布局181
luojunjie1999的博客
07-13 410
圆角边框 圆形设置方法：设置为高度和宽度的一半 <style> div{ width: 100px; height: 100px; background-color: pink; border-radius: 50%; } </style> 圆角矩形设置方法：设置为高度的一半 div{ width: 200px; height: 100px; background-
CSS画四分之一圆
小丫么小夏夏
12-27 1459
CSS画四分之一圆 border-radius: 100% 0 0 0; // 左上1/4圆 border-radius: 0 0 100% 0; // 右下1/4圆 border-radius: 左上 右上 右下 左下
CSS3 border-radius实现边框圆角
秋夫人
08-09 4023
border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius :3px; 这三个的功能是一样的，只是针对不同的浏览器内核分别定义。 一、基本语法： 　　border-radius ： none | {1,4} [/ {1,4} ]?  
使用css3图形描绘
xiaowei的博客
02-20 871
css描绘各种图形：<!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;
css3中的box-sizing属性
曜灵的博客 - 欢迎访问 https://lianpf.github.io
03-05 776
box-sizing的CSS属性是用来改变默认的CSS框模型，用于计算元素的宽度和高度。它可以使用这个属性来模拟浏览器的行为不正确支持CSS盒模型的规范。 说到 IE 的 bug，在 IE6以前的版本中，IE对盒模型的解析出现一些问题，跟其它浏览器不同，将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反，是不包括border和padding的
web前端 之CSS样式常见边框问题详解
weixin_46820017的博客
05-10 479
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; paddin
HTML5学习_day13(3)--border-radius属性(圆角边框)
woaiwanshumen的博客
10-12 4192
border-radius属性 用法： border-radius:像素; 复合写法： 1. 左上角 右上角 右下角 左下角 border-radius:20px; 2. 左上角=右下角=20px; 右上角=左下角=40px; border-radius:20px 40px; 3. 左上20 右上30 右下40 border
CSS - 盒子边框（border）、圆角边框(CSS3)
weixin_42235173的博客
06-06 2936
盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) d...
css盒子模型边框圆角矩形
最新发布
12-08
CSS盒子模型边框圆角矩形可以通过设置border-radius属性来实现。border-radius属性用于设置元素的圆角边框，其值可以是一个或多个长度或百分比值，用空格隔开。如果只指定一个值，则四个角都使用该值。如果指定两个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值