首页 > 常识 > 互联网 > 网站制作 > 基础与技巧

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

作者:  时间:2015-09-19
描述:其实圆角艺术性一些,但是不足之处是让人觉得内容多(在感觉上),使用是否采用圆角边框需要斟凿一番的。

<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></head>之间。

如果四个角都是一样的大小,则可以写成下面这样子:

<style type="text/css">
.a {
border-radius: 20px;
background-color: #f8f8f8;
border: 1px solid #000;
padding:5px;   
}
</style>

生活宝典》在设计“学生作文辅导站”页面的时候,为了看上去显得活泼点儿,就制作成了圆角边框,但是仔细看后就觉得不怎么理想。于是就放弃了刚开始的想法了。坚持了健康阅读第一的原则。其实圆角艺术性一些,但是不足之处是让人觉得内容多(在感觉上),使用是否采用圆角边框需要斟凿一番的。

从手机浏览器访问《生活宝典》

站内搜索
无相关信息
微商帮
世界网站大全
中国科研团队:大象的长鼻子是如何越变越长了
中国科研团队:大象的长
自己是否能够像自己想的那样做成一件事,身旁人的判断会比自己准确
自己是否能够像自己想
火宫殿:吃喝玩乐看,烧香拜神佛,红火的庙会经济
火宫殿:吃喝玩乐看,烧香
眼见为实也不为实,更须谨慎看到的并非全貌
眼见为实也不为实,更须