前端大本营

HTML5,CSS3,Responsive,资料站

border-bottom-right-radius 说明

border-bottom-right-radius 属性,指定div左下角的圆角时使用。 可以以组形式设定水平方向和垂直防线的半径<向 div 元素的右下角添加圆角边框> 圆角半径,可以指定具体长度,也可以设置为百分比,设置两个值的时候,第一个为水平半径,第二个为垂直半径。只有一个值时,水平与垂直的半径相同 或者可以直接使用border-radius 来制定div的4个角的圆角。

属性值

0(默认值) length长度 圆半径长度指定。<定义圆角的形状。> percentage百分比 相应div的百分比。<以百分比定义圆角的形状。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!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=utf-8" />
<title>border-bottom-right-radius</title>
<style>
table.sample1 {
border:solid 10px blue;
border-bottom-right-radius: 1em;	
}
table.sample1 td {
background-color:forestgreen;
border-bottom-right-radius: 0.5em;	
}	

p.sample2 {
width:280px; height:130px; background-color:#ccecf4; 
border:solid 20px #7fcfe2; 
border-bottom-right-radius: 100px 50px;
}	
</style>

</head>

<body>
<table class="sample1">
<tr><td>属性</td><td>border-bottom-right-radius</td></tr>
<tr><td>table指定圆角边框</td><td>1em</td></tr>
<tr><td>td指定圆角边框</td><td>0.5em</td></tr>	
</table>
<p class="sample2">border-bottom-right-radius: 100px 50px;</p>
</body>
</html>
实例图 border-bottom-right-radius 指定div右下圆角边框 —— CSS3 参考 边框
更多技术问题,可以访问我的技术论坛
Tags: ,
Posted in 圆角边框 | border-bottom-right-radius 指定div右下圆角边框 —— CSS3 参考 边框已关闭评论

border-bottom-left-radius 说明

border-bottom-left-radius 属性,指定div左下角的圆角时使用。 可以以组形式设定水平方向和垂直防线的半径<向 div 元素的左下角添加圆角边框> 圆角半径,可以指定具体长度,也可以设置为百分比,设置两个值的时候,第一个为水平半径,第二个为垂直半径。只有一个值时,水平与垂直的半径相同 或者可以直接使用border-radius 来制定div的4个角的圆角。

属性值

0(默认值) length长度 圆半径长度指定。<定义圆角的形状。> percentage百分比 相应div的百分比。<以百分比定义圆角的形状。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!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=utf-8" />
<title>border-radius</title>
<style>
table.sample1 {
border:solid 10px blue;
border-bottom-left-radius: 1em;	
}
table.sample1 td {
background-color:forestgreen;
border-bottom-left-radius: 0.5em;	
}	

p.sample2 {
width:280px; height:130px; background-color:#ccecf4; 
border:solid 20px #7fcfe2; 
border-bottom-left-radius: 100px 50px;
}	
</style>

</head>

<body>
<table class="sample1">
<tr><td>属性</td><td>border-bottom-left-radius</td></tr>
<tr><td>table指定圆角边框</td><td>1em</td></tr>
<tr><td>td指定圆角边框</td><td>0.5em</td></tr>	
</table>
<p class="sample2">border-bottom-left-radius: 100px 50px;</p>
</body>
</html>
实例图 border-bottom-left-radius 指定div左下圆角边框 —— CSS3 参考 边框
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 圆角边框 | border-bottom-left-radius 指定div左下圆角边框 —— CSS3 参考 边框已关闭评论

border-top-right-radius 说明

border-top-right-radius 属性,指定div右上角的圆角时使用。 可以以组形式设定水平方向和垂直防线的半径<向 div 元素的右上角添加圆角边框> 圆角半径,可以指定具体长度,也可以设置为百分比,设置两个值的时候,第一个为水平半径,第二个为垂直半径。只有一个值时,水平与垂直的半径相同 或者可以直接使用border-radius 来制定div的4个角的圆角。

属性值

0(默认值) length长度 圆半径长度指定。<定义圆角的形状。> percentage百分比 相应div的百分比。<以百分比定义圆角的形状。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!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=utf-8" />
<title>border-radius</title>
<style>
table.sample1 {
border:solid 10px blue;
border-top-right-radius: 1em;	
}
table.sample1 td {
background-color:forestgreen;
border-top-right-radius: 0.5em;	
}	

p.sample2 {
width:280px; height:130px; background-color:#ccecf4; 
border:solid 20px #7fcfe2; 
border-top-right-radius: 100px 50px;
}	
</style>

</head>

<body>
<table class="sample1">
<tr><td>属性</td><td>border-top-right-radius</td></tr>
<tr><td>table指定圆角边框</td><td>1em</td></tr>
<tr><td>td指定圆角边框</td><td>0.5em</td></tr>	
</table>
<p class="sample2">border-top-right-radius: 100px 50px;</p>
</body>
</html>
实例图 border-top-right-radius 指定div右上圆角边框 —— CSS3 参考 边框
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 圆角边框 | border-top-right-radius 指定div右上圆角边框 —— CSS3 参考 边框已关闭评论

border-top-left-radius 说明

border-top-left-radius 属性,指div左上角的圆角时使用。 可以以组形式设定水平方向和垂直防线的半径<向 div 元素的左上角添加圆角边框> 圆角半径,可以指定具体长度,也可以设置为百分比,设置两个值的时候,第一个为水平半径,第二个为垂直半径。只有一个值时,水平与垂直的半径相同 或者可以直接使用border-radius 来制定div的4个角的圆角。

属性值

0(默认值) length长度 圆半径长度指定。<定义圆角的形状。> percentage百分比 相应div的百分比。<以百分比定义圆角的形状。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!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=utf-8" />
<title>border-radius</title>
<style>
table.sample1 {
border:solid 10px blue;
border-top-left-radius: 1em;	
}
table.sample1 td {
background-color:forestgreen;
border-top-left-radius: 0.5em;	
}	

p.sample2 {
width:280px; height:130px; background-color:#ccecf4; 
border:solid 20px #7fcfe2; 
border-top-left-radius: 100px 50px;
}	

</style>

</head>

<body>
<table class="sample1">
<tr><td>属性</td><td>border-top-left-radius</td></tr>
<tr><td>table指定圆角边框</td><td>1em</td></tr>
<tr><td>td指定圆角边框</td><td>0.5em</td></tr>	
</table>
<p class="sample2">border-top-left-radius: 100px 50px;</p>
</body>
</html>
实例图 border-top-left-radius 指定div左上圆角边框 —— CSS3 参考 圆角边框
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 圆角边框 | border-top-left-radius 指定div左上圆角边框 —— CSS3 参考 圆角边框已关闭评论

border-radius 说明

指定div四个角的圆角时使用。 一个一个指定四个角的半径形成的椭圆,其实是由水平半径和垂直半径所组成的,如下图<规定背景图像的尺寸> 可以将border-radius的值简写 如 border-radius:100px 25px 50px 50px / 50px 25px 50px 25px; 前面部分表示水平方向,后面表示垂直方向,取值顺序左上,右上,右下,左下。 还可以分别使用 border-top-left-radius(左上)・border-top-right-radius(右上)・border-bottom-left-radius(左下)・border-bottom-right-radius(右下) 来设置圆角边框。 后面部分省略的时候水平和垂直方向的值相同。 如果左下省略的时候,值同右上。 如果右下省略的时候,值同左上。 如果右上省略的时候,值同左上。 值可以指定百分比,px,em,pt,值为0的时候,为四角行,无圆角边框。

属性值

0(默认值) length长度 圆半径长度指定。<定义圆角的形状。> percentage百分比 相应div的百分比。<以百分比定义圆角的形状。>
※<>内表示的内容是从其他网站转录的内容。 实例代码
<!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=utf-8" />
<title>border-radius</title>
<style>
table.sample1 {
border:solid 10px blue;
border-radius: 1em;	
}
table.sample1 td {
background-color:forestgreen;
border-radius : 0.5em;	
}	

p.sample2 {
width:280px; height:130px; background-color:#ccecf4; 
border:solid 20px #7fcfe2; 
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
}	

</style>

</head>

<body>
<table class="sample1">
<tr><td>圆角边框</td><td>border - radius</td></tr>
<tr><td>table要素指定的圆角值</td><td>1em</td></tr>
<tr><td>td指定的圆角值</td><td>0.5em</td></tr>	
</table>
<p class="sample2">border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;</p>
</body>
</html>

实例图 border-radius 指定div圆角边框 —— CSS3 参考 圆角边框
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 圆角边框 | border-radius 指定div圆角边框 —— CSS3 参考 圆角边框已关闭评论