【CSS应用篇】——CSS如何实现圆角边框

问题引入：

如何实现元素的圆角样式：

使用圆角属性细节：

格式：

实操演示：

案例：

一，实现正圆；

二，实现胶囊按钮

问题引入：

我们在学完盒子模型之后，创建的盒子总是方方正正的，然而在实际应用中我们总会遇到一些圆角的边框或者盒子（如下图），那么他是如何实现的呢？

如何实现元素的圆角样式：

我们可以通过 CSS border-radius 属性，实现任一元素的“圆角”样式。圆角边框属性border-radius是CSS3新增的属性，在圆角边框属性出现之前，我们想要实现圆角边框都是用圆角图片做背景实现的，然而现在有了圆角属性就很方便了，可以设置任一样式的圆角；

使用圆角属性细节：

圆角边框属性：border-radius：可以为元素添加圆角边框，他的属性值设置和外边距、内边距的设置方式一样，可以是一个值也可以是二、三、四个值；语法是从左上方开始顺时针依次设置，如果哪一个角没有设置就看他的对角；

格式：

border-radius:数字+px；

border-radius:百分比；//百分比最大是50%

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

实操演示：

要求：将下列左图变成右图；

   /* <div class="box"></div>*/.box{width: 200px;height: 100px;background-color: pink;border-radius: 10px;margin: 50px auto;}

注意：比如我们设置如下格式：

 border-radius: 30px 50px 60px; /*border-radius: 30px 50px 60px 50px;*/效果同上

此时我们按照语法是仅仅设置了左上，右上，右下，三个角的圆角，左下角没设置，那么浏览器是如何处理的呢？看它的对角也就是右上，如果某个角没设置，就看他的对角，与他的对角处理相同；

案例：

一，实现正圆；

   /* <div class="box"></div>*/.box{width: 200px;height: 200px;background-color: pink;border-radius: 50%;margin: 50px auto;}

二，实现胶囊按钮

   /* <div class="box"></div>*/.box{width: 300px;height: 100px;background-color: pink;border-radius: 30px;margin: 50px auto;}

【CSS应用篇】——CSS如何实现圆角边框相关推荐

CSS盒子模型/PS基操/圆角边框/盒子阴影/文字阴影/案例
CSS 03 1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
CSS基础篇--css reset重置样式有那么重要吗？
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...
html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）
本篇文章主要给大家介绍css边框效果怎么实现的. css圆角边框代码具体示例如下: css圆角边框代码实例 div { color: white; text-align:center; border: ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
php边框圆角,css如何设置圆角边框？css设置圆角边框的方法(图文)
css如何设置边框?很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角边框比如按钮之类的,那么,我们该怎么来设置圆角边框呢?本篇文章将给大家来介绍一下css设 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...

【CSS应用篇】——CSS如何实现圆角边框

问题引入：

如何实现元素的圆角样式：

使用圆角属性细节：

格式：

实操演示：

案例：

一，实现正圆；

二，实现胶囊按钮

【CSS应用篇】——CSS如何实现圆角边框相关推荐

最新文章

热门文章