div怎么设置圆角边框

我们在开发前端页面的时候,经常会使用到按钮或者div做的按钮,那么我们就会给这个按钮的四个角做一些角度,让div变的更好看,更符合审美一点,那么怎么才能将div设置成圆角呢?

设置四个角的圆角

  • 01

    border-top-left-radius 设置左上角的弧度

  • 02

    border-top-right-radius 设置右上角的弧度

  • 03

    border-bottom-right-radius 设置右下角的弧度

  • 04

    border-bottom-left-radius 设置左下角的弧度

设置整体圆角

  • 01

    使用百分比来设置圆角,50%以上就完成成了一个圆,如果宽高一样的话

  • 02

    使用px来设置圆角,50px以上就完成成了一个圆

(0)

相关推荐

  • css3如何实现圆角边框

    圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,灵活性差,也达到降低了网站的整体性能,而圆角边的出现则降低了开 ...

  • css设置虚线边框

    border-style属性用来定义边框的样式,可以使用dashed属性定义一个虚线边框. 语法:border-style:dashed; 操作方法 01 打开html开发工具,新建一个html代码页 ...

  • 怎样利用css样式为html元素设置圆角框

    传统的html页面中,大多数都是棱角分明的长方形框框,有时候遇到设计按钮时,就需要我们为元素添加一个圆角边框,那么我们应该怎样通过使用css样式为元素设置圆角边框呢 操作方法 01 首先我们需要打开自 ...

  • 如何利用HTML5和CSS3设置四边边框border边界线

    CSS3边框border,可以设置其样式.颜色和宽度,边框粗细等,其中边框border有 border-bottom border-top border-left border-right 下面利用四 ...

  • 使用ps快速给风景图片添加圆角边框的方法

    Adobe Photoshop,简称"PS",是美国Adobe公司旗下最为出名的图像处理软件之一,深受广大平面设计人员和电脑美术爱好者的喜爱.使用ps快速给风景图片添加圆角边框的方 ...

  • 怎么给图片添加圆角边框

    ps软件的功能是很强大的,如果你还没有应用得到,说明你学习的还不够,需要继续学习.那么,怎么给图片添加圆角边框呢?下面,就让小编给大家介绍一下吧. 操作方法 01 首先,我们需要打开我们电脑的ps软件 ...

  • 怎样在Word2003文档中设置段落边框

    在使用Word2003编辑文档的过程中,有时需要为段落设置边框。例如当需要在文档标题和正文之间添加一条分割线时,则可以借助段落边框功能实现这个目的,操作步骤如下所述: 第1步,打开Word2003文档 ...

  • 在word2010中如何设置表格边框底纹

    在Word2010中,用户不仅可以在“表格工具”功能区设置表格边框,还可以在“边框和底纹”对话框设置表格边框,操作步骤如下所述: 第1步,打开Word2010文档窗口,在Word表格中选中需要设置边框 ...

  • Word2007怎么设置图片边框

    俗话说人靠衣装,而美丽的图片,如果架上边框的话,会更加地完美.在Word2007文档中,我们知道有边框和底纹的设置,而在图片中,也为用户提供了多种颜色.多种粗细尺寸的实线边框或虚线边框. 第1步,打开 ...