1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css用边框实现圆角矩形

css用边框实现圆角矩形

时间:2021-06-12 03:14:07

相关推荐

css用边框实现圆角矩形

今天要做一个圆角矩形的按钮,于是直接找圆角矩形的css实现方式,搞了半天,虽然也实现效果了,但是很复杂,需要用很多代码,后来突然想到以前做过的一个边框效果,也是圆角矩形,于是找了出来,发现这种办法相当简单并且效果一点也不差,这里简要分享一下。

关键部分都有注释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title>div+CSS圆角矩形</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/CSS">.roundedRectangle{height: 70px; width: 100px;margin-top: 100px;background: #9BD1FA;//背景色border-width: 10px;//边缘的宽度,如果要分别设置可以这样:border-width: 15px 5px 15px 5px;依次为上、右、下、左border-style: solid;border-radius: 15px;//圆角的大小border-color: #000 #000 #000 #000;//边框颜色,依次为上、右、下、左}.roundedRectangle p{margin: 0px auto;padding: 20px;text-align:center;font-size: 20px;letter-spacing:8px;}</style></head><body><div class="roundedRectangle"><p>测试</p></div></body></html>

css的边框还有很多样式,还可以改变边框的属性来实现其他的效果,详情请看:/css/css_border.asp

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。