CSS实现圆,圆角边框

用CSS可以实现圆,圆角边框,下面具体演示一下这两个图案

一.圆形
思路:圆形实际上是在一个正方形的基础上加一个border-radius属性实现的
代码如下:

<style>div {height: 100px;width: 100px;border-radius: 50px;background-color: pink;}</style>

[注]:这里的border-radius可以用50%代替50px,赋50px之外的值会变成椭圆形
效果图如下:

二.圆角边框
思路:首先构建一个矩形,再给矩形的四个角相应的弧度
代码如下:

<style>div {height: 100px;width: 100px;border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;background-color: pink;}</style>

上面代码可以替换成简写如下:

 <style>div {height: 100px;width: 100px;border-radius: 20px 20px 20px 20px;background-color: pink;}</style>

[注]:简写的顺序是 : 左上角右上角右下角左下角
效果图如下:

CSS实现圆,圆角边框相关推荐

【CSS应用篇】——CSS如何实现圆角边框
目录问题引入: 如何实现元素的圆角样式: 使用圆角属性细节: 格式: 实操演示: 案例: 一,实现正圆: 二,实现胶囊按钮问题引入: 我们在学完盒子模型之后,创建的盒子总是方方正正的,然而在实际应 ...
10 CSS盒子模型+圆角边框+盒子阴影+文字阴影
1. 盒子模型 1.1 看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容. 网页布局的 ...
纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...
html盒子圆角属性,CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式,可以将盒子变为圆角. border-radius 用于设置元素的外边框圆角. 语法: border-radius:length; 参数值可以为数值或百分比的形式如果是正 ...
CSS系列之圆角边框（CSS3）
文章の目录 1.border-top-left-radius 1.1.属性值 1.2.取值 2.border-top-right-radius 2.1.属性值 2.2.取值 3.border-bott ...
php边框圆角,css如何设置圆角边框？css设置圆角边框的方法(图文)
css如何设置边框?很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角边框比如按钮之类的,那么,我们该怎么来设置圆角边框呢?本篇文章将给大家来介绍一下css设 ...
css如何实现圆角边框
圆角边框属性是css3新增的属性,在圆角边框属性出现之前想要实现圆角边框都是用图片做背景实现的,现在有了圆角边框属性实现圆角效果就简单多了. 1.圆角边框属性 :border-radius:可以为元素 ...
css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
html如何设置圆角效果,css怎么设置圆角边框样式？
很多时候在开发网页前端的时候,为了让网页上面的东西看起来更加的舒服,我们可能需要设置一些圆角的效果,比如圆形的头像.圆角的按钮等等. 在css样式中有一个属性:border-radius属性是就常见 ...

CSS实现圆,圆角边框

CSS实现圆,圆角边框相关推荐

最新文章

热门文章