整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

第11天|16天搞定前端,CSS的圆角边框,让人赏心悦目

人可能会疑惑,我为什么专门用一节内容来说边框和圆角。其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了。有边框的页面,让人耳目一新,一目了然;有圆角的内容,让人赏心悦目,心旷神怡。说的有点夸张了,就这么着吧。

边框(border)一般为长方形形状,有上下左右四条边,CSS边框属性允许你指定一个元素边框的样式和颜色。CSS的圆角(border-radius)方法,可给任何元素制作 "圆角"效果。

11.1 边框逼格

在CSS中,你可以通过border和其延伸的,如border-style,来实现边框的效果。上边框相关的有border-top-style样式、border-top-color颜色、border-top-width宽度和组合了它们的border-top。下、左右边框类似,换成对应的单词即可。

边框样式(border-style)常用的有dotted(点线)、dashed(虚线)、solid(实线)、double(双边框)这四种,不常用的有groove(3D沟槽)、ridge(3D脊边)、inset(3D嵌入)和outset(3D突出)。

/* --------在样式表文件中---------- */
/*4条边框一起设置*/
.four-border {
    width: 800px;
    border: 2px solid darkgreen;;
}

/*四条边框可个性化*/
.four-style {
    width: 800px;
    /* 上、右、下、左*/
    border-width: 1px 2px 3px 4px;
    /*上、右左、下*/
    border-style: solid dashed double;
    /*上下和右左*/
    border-color: darkgreen coral;
}

/*单条边框设置*/
.one-style {
    width: 800px;
    border-top: 1px groove orangered;
    border-bottom-width: 5px;
    border-bottom-style: inset;
    border-bottom-color: darkgreen;
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>边框逼格</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
    border统一设置四条边框<br/>
    顺序为:border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
    四条边框一起设置,风格可不同<br/>
    顺序为:上、右、下、左。<br/>
    1. 只有一个值(如:border-width:2px):表示4条边框全部一样;<br/>
    2. 有两个值(如:border-width:2px 3px):表示上下和右左;<br/>
    3. 有三个值(如:border-width:2px 3px 1px):表示上、右左、下;<br/>
    4. 有四个值(如:border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
    单独一天边框进行设置<br/>
    border-top:顶部宽度、样式、颜色,一起设置<br/>
    border-top-width:上边框宽度;<br/>
    border-top-style:上边框样式;<br/>
    border-top-color:上边框颜色。
    <br/>
</div>
</body>
</html>

输出结果

11.2 圆角风格

使用CSS的border-radius 属性,你可以给任何元素制作 "圆角"。 border-radius统一指定4个圆角,顺序为左上、右上、右下和左下。如果要特定指定某个角的话,用border-top-left-radius等方式即可。

在样式表ys2.css文中的内容

/*4个角统一指定*/
.four-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-radius: 15px;
    vertical-align: middle;
    text-align: center;
}

/*单独指定一个角*/
.one-radius {
    width: 800px;
    line-height: 40px;
    background: #8AC007;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<br/><br/>
<div class="four-radius">
    统一设置4个圆角<br/>
    一个值: 四个圆角值相同;<br/>
    两个值: 左上角与右下角,右上角与左下角;<br/>
    三个值: 左上角, 右上角和左下角,右下角;<br/>
    四个值: 左上角,右上角,右下角,左下角。
</div>
<br/>
<div class="one-radius">
    单独指定某个角<br/>
    border-top-left-radius:左上角;<br/>
    border-top-right-radius:右上角;<br/>
    border-bottom-right-radius:右下角;<br/>
    border-bottom-left-radius:左下角。
</div>

输出结果

11.3 圆角边框

不要重复造轮子,所以好多程序员一遇到问题,就喜欢搜索,我也是,哈哈哈~。CSS有指定边框的属性,也有圆角的属性,将其放在一起,是不是就可以实现圆角边框?答案毋庸置疑,答案是肯定的。

在样式表ys2.css文件中的内容

/*圆角边框*/
.corners {
    border-radius: 50px;
    border: 3px solid #8AC007;
    padding: 50px;
    width: 720px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
}

在HTML文件中的内容

<div class="corners">
    边框属性和圆角属性,组合成圆角边框
</div>

输出结果


好了,有关CSS的圆角边框内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##HTML5##CSS##程序员##Web#

看下效果图

对基于CSS的设计最初的批评意见之一是CSS太死板了,只能建立方框,因此本次我们需要用图形软件创建下面两个图形,一个用于顶部,一个用于底部。

接下来我们详细介绍它的实现方法:

1.创建一个简单的框标记并输入相关内容

<div class="box">

<h2>笑话</h2>

<p>朋友圈里,有这么一条:“和女友分手后一直很不安,害怕她会变坏,胡乱约炮,太过放纵,怎么办?”下面神回复:“其他人的恶劣行径顶多是占着茅坑不拉屎,你这是出了厕所还想锁门。”</p>

</div>

2.将顶部图像用于标题的背景置于顶部(左上角),将底部图像用于DIV框的背景置于底部(左下角),然后给DIV框添加相同的背景颜色并设置一定的宽度,三者共同形成框的主体。

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;}

.box h2{background:url(top.jpg) no-repeat left top;}

3.调整两个背景图像的尺寸,宽度与DIV框的宽度一致,使其看起来更像一个整体

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

background-size:275px;}

.box h2{background:url(top.jpg) no-repeat left top;

background-size:275px;}

4.最后为了不使内容与边框靠的太近可以添加一些内边距或并居中对齐即可

.box{width:275px;

background:#ef1111 url(bottom.jpg ) no-repeat left bottom;

background-size:276px;

margin:0 auto;}

.box h2{background:url(top.jpg) no-repeat left top;

background-size:276px;

padding-top:30px;

text-align:center;}

.box p{padding:0 5px 30px 5px;}

尺寸根据自己的需要设定如下图:

、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5


二、border-radius 属性

1. 创建具有背景图的圆角

CSS3中,可以使用border-radius属性,为元素指定圆角显示。

代码如下:

<!DOCTYPE html>
    <html>
    <meta charset="UTF-8">
    <title>项目</title>

    <head>
        <style>
            #rcorners1 {
                border-radius: 25px;
                background: #f00;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners2 {
                border-radius: 25px;
                border: 2px solid #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }

            #rcorners3 {
                border-radius: 25px;
                background: url(img/fy_indexBg.jpg);
                background-position: left top;
                background-repeat: repeat;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
</style>
    </head>

    <body>

        <p>The border-radius property allows you to add rounded corners to elements.</p>
        <p>Rounded corners for an element with a specified background color:</p>
        <!--1.具有指定背景色的圆角元素-->
        <p id="rcorners1">Rounded corners!</p>
        <p>Rounded corners for an element with a border:</p>
        <!--2.带边框的圆角元素:-->
        <p id="rcorners2">Rounded corners!</p>
        <!--3.带背景图的圆角元素-->
        <p>Rounded corners for an element with a background image:</p>
        <p id="rcorners3">Rounded corners!</p>

    </body>

</html>

提示:

border-radius属性实际是border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius 属性的简写。


2. 为每个角指定弧度

如果只为border-radius属性指定一个值,则此半径将应用于所有4个角。

另外可以根据自己开发的需求,分别指定每个角。以下是规则:

四个值: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。

三个值: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。

两个值: 第一个值适用于左上和右下角,和二值适用于右上和左下角。

一个值: 所有的四个角都是圆的。

实例1:

1.四个值 - border-radius: 15px 50px 30px 5px

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

2.三个值 - border-radius: 15px 50px 30px

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3.两个值 - border-radius: 15px 50px

#rcorners6 {
    border-radius: 15px 50px;
    background: #f00;
    padding: 20px;
    width: 200px;
    height: 150px;
}

完整代码 :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #rcorners4 {
      border-radius: 15px 50px 30px 5px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners5 {
      border-radius: 15px 50px 30px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }

  #rcorners6 {
      border-radius: 15px 50px;
      background: #f00;
      padding: 20px;
      width: 200px;
      height: 150px;
  }
</style>
</head>
<body>

<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>

<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>

<p>两个值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>

</body>
</html> 

实例2:

创建椭圆形的圆角

创建椭圆形的圆角

椭圆边框 :border-radius: 50px/15px

#rcorners7 {
    border-radius: 50px/15px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

椭圆边框 : border-radius: 15px/50px

#rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

椭圆边框 : border-radius: 50%

#rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
    #rcorners7 {
        border-radius: 50px/15px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners8 {
        border-radius: 15px/50px;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }

    #rcorners9 {
        border-radius: 50%;
        background: #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
</style>
</head>
<body>

  <p>椭圆边框 - border-radius: 50px/15px:</p>
  <p id="rcorners7"></p>

  <p>椭圆边框 - border-radius: 15px/50px:</p>
  <p id="rcorners8"></p>

  <p>椭圆边框 - border-radius: 50%:</p>
  <p id="rcorners9"></p>-->

</body>
</html>

三、总结

1、本文主要讲解了CSS3圆角,通过一些属性的演示,丰富的案例,帮助大家理解CSS知识。希望大家可以耐心去学习,同时希望碰到问题主动搜索,尝试一下,总会有解决方法。

2、代码很简单,希望能帮到你。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/