在HTML中如何把块的边框做成圆角

radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

操作方法

  • 01

    语法： border-radius ： none | <length>{1,4} [ / <length>{1,4} ]? 相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

  • 02

    取值： <length>： 由浮点数字和单位标识符组成的长度值。不可为负值。 border-top-left-radius： 由浮点数字和单位标识符组成的长度值。不可为负值。

  • 03

    说明： 第一个值是水平半径。 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。 如果任意一个值为0，则这个角是矩形，不会是圆的。 值不允许是负值。

  • 04

    在Adobe Dreamweave 软件里写如以下代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在HTML中如何把块的边框做成圆角</title> <style type="text/css"> .a { background-color: #c7dec6; border: 1px solid #000; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height:200px; width:500px; padding:20px; } </style> </head> <body> <p class="a"> 在HTML中如何把块的边框做成圆角 </p> </body> </html>

  • 05

    样式注释 各个边角的样式分开显示： border-top-left-radius: 10px;左上部边框圆角10个像素 border-top-right-radius: 10px;右上部边框圆角10个像素 border-bottom-left-radius: 10px;左下部边框圆角10个像素 border-bottom-right-radius: 10px;右下部边框圆角10个像素 全部边角一个样式：border-radius: 10px;所有边框圆角10个像素

赞 (0)

相关推荐

  • 在Word2010中插入地址块进行邮件合并的图文步骤

    Word2010/2096.html'>地址块是Word2010中内置的域，用于帮助用户在进行邮件合并时快速插入收件人地址信息。在Word2010文档中插入地址块的步骤如下所述： 第1步，打开W ...

  • WPS2005中轻松给文字加上边框

    在WPS2005的“格式”工具栏中并没有直接给文字加框的工具，那么，怎样才能给文字加上外框呢? 其实很简单，只要点击菜单命令“视图→工具栏→其它格式”，如图1所示。显示“其它格式”工具栏，然后点击工具 ...

  • 在Word2010中插入地址块进行邮件合并

    Word2010/2096.html'>地址块是Word2010中内置的域，用于帮助用户在进行邮件合并时快速插入收件人地址信息。在Word2010文档中插入地址块的步骤如下所述： 第1步，打开W ...

  • word2007中如何给文字添加边框 word自定义文字边框的设置方法

    word是我们常用的办公软件,为了文字的美观,我们需要给文字加上一些边框,那么word2007中如何给文字添加边框?下面小编带来word自定义文字边框的设置方法,希望对大家有所帮助. word自定义文 ...

  • excel表格复制到word文档中如何删除表格的边框?

    当在word文档中粘贴excel表格内容时,会把表格的边框都会一并复制过来.如何把这些边框删除呢?下面小编就为大家详细介绍一下,来看看吧! 步骤 1.打开excel工作表,把表中的内容复制. 2.打开 ...

  • ppt中制作人物探出圆形边框的3d效果教程

    手把手教你在ppt中如何制作人物探出圆形边框的3d效果?下图这种人物探出圆形框的3d立体效果可以使人物层次显得比较丰满,作为简历照片也很实用,好了,话不多说,让我们看看这种效果如何用Powerpoin ...

  • 蚂蚁庄园小课堂问题“我的公益中捐赠4块相当于什么”答案

    蚂蚁庄园小课堂问题“我的公益中捐赠4块相当于什么”答案

    最近支付宝中的蚂蚁庄园小课堂又出了新问题"我的公益中捐赠4块相当于什么",下面小编就来为大家解决这个问题.具体如下:1. 首先,打开手机上的支付宝.2. 进入软件首页后,在应用栏处 ...

  • 如何在Word中为图片设置虚线边框？

    如何在Word中为图片设置虚线边框？

    相信很多小伙伴在日常办公中都会用到Word,如果我们想要在其中为图片设置虚线边框该怎么做呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的Word.2. 进入后,点击页面上端的 ...

  • 如何在电脑中输入黑方块符号

    如何在电脑中输入黑方块符号

    随着科技的发展,电脑已经成为人们工作生活中的必要工具,当我们在使用电脑处理文档时,有的时候需要打出黑方块符号,接下来就由小编来告诉大家如何输入该符号.符号黑方块怎么打出来(方法1)1. 第一步,打开电 ...