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

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

工具/原料

Adobe Dreamweave 软件

方法/步骤

语法：

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
取值：

<length>：

由浮点数字和单位标识符组成的长度值。不可为负值。

border-top-left-radius：

由浮点数字和单位标识符组成的长度值。不可为负值。
说明：

第一个值是水平半径。

如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。

如果任意一个值为0，则这个角是矩形，不会是圆的。

值不允许是负值。
在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 {

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>
样式注释

各个边角的样式分开显示：

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个像素

转载于:https://www.cnblogs.com/telwanggs/p/4530820.html

在HTML中如何把块的边框做成圆角相关推荐

微信小程序 css圆角,微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框...
border-radius 圆角边框通用语法浏览器支持微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangj ...
关于如何用css使盒子的边框做成圆角的问题
要实现圆角的效果其实很简单,用一个radius属性就行了.话不多说,直接上代码: <!DOCTYPE html> <html lang="en"><h ...
如何向Word中插入代码块
如何向Word中插入代码块对于一些用Word写的论文,作业中如果要插入代码,无论是直接复制粘贴还是加上灰色无边框的效果看上去十分不美观, 优雅的插入代码块给别人的印象就会好很多. 思路:将代码块的原 ...
switch语句中在case块里声明变量会遇到提示“Expected expression before...的问题
switch语句中在case块里声明变量会遇到提示"Expected expression before..."的问题例如在如下代码中 1 case constant: 2 in ...
拆分命令_在MongoDB分片集群中拆分数据块chunks
MongoDB Manual (Version 4.2)> Sharding > Data Partitioning with Chunks > Split Chunks in a ...
Java中普通代码块，构造代码块，静态代码块区别
Java中普通代码块,构造代码块,静态代码块区别及代码示例 //执行顺序:(优先级从高到低.)静态代码块>mian方法 >构造代码块>构造方法. 其中静态代码块只执行一次.构造代码 ...
Verilog初级教程（12）Verilog中的generate块
文章目录前言正文 generate for generate if generate case 参考资料本系列博文前言 verilog中的generate块可以称为生成块,所谓生成,可以理解为 ...
Verilog初级教程（11）Verilog中的initial块
文章目录前言正文语法格式 initial块是用来干什么的? initial块何时开始又何时结束? 一个模块中允许有多少个initial块? 参考资料写在最后前言仿真中通常会依次执行一组Ve ...
python代码块-Python中的代码块和非代码块是什么
Python中的代码块和非代码块是什么发布时间:2020-06-26 13:53:30 来源:亿速云阅读:150 今天就跟大家聊聊有关Python中的代码块和非代码块是什么,可能很多人都不太了解, ...

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

工具/原料

方法/步骤

在HTML中如何把块的边框做成圆角相关推荐

最新文章

热门文章