零基础建站培训介绍

当前位置:

如何设置圆角边框和圆形(border-radius属性)

在自己做网站时,为了显示效果,我们需要对某些区块设置圆角边框,这时,我们需要用到CSS的border-radius属性,通过border-radius属性就可以轻松设置圆角边框。在CSS3视频教程中也介绍过这个属性。

设置半径为10px的圆角

201609261224113


border-radius:10px;

设置不同大小的圆角边框

201609261224113

 


border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。

设置实心上半圆:

方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。


div{  
height:50px;/*是width的一半*/  
width:100px;  
background:#9da;  
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/  
}

设置实心圆:

方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。


div{  
height:100px;/*与width设置一致*/  
width:100px;  
background:#9da;  
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/  
}

更多应用:css3控制div一边圆角一边直角

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • 什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • html基本语法汇总 (15427 次学习)
    简介HTML(Hyper Text Mark-up Language超文本标记语言):不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote 元素的
  • <canvas> 标签定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形之前接触Canvas是在silverlight和w
  • 相同点:后缀有html,htm,shtml本质上都属于静态网页一种。(相关教程:HTML入门教程)区别:.html与.htm均是静态网页后缀名,网页文件没有区别与
  • html span标签用法详解 (11601 次学习)
    在HTML中,span标签是经常使用的标签。在HTML入门教程中,我们也详细介绍了span标签,下面学做网站论坛就对html span标签用法作一个详细介绍。html s
  • 做网站时,避免不了网站上有大量的图片。网站上的图片显示就需要使用img图片标签。HTML img图片标签写法<img src="图片地址" alt=&q
  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向,竖直
  • html 标签基本语法 (115571 次学习)
    html 标签基本语法有以下几个特点:刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标记文本
  • HTML <font>标签之html文字字体、html字体颜色、html字体大小设置标签元素一、font标签语法与结构<font color="#FF0000">w