下面的例子展示了你如何使用CSS3在HTML容器中设置一个特定的圆角半径。使用border-top-left-radius 和border-bottom-right-radius样式。
<!DOCTYPE HTML>
<html>
<head>
<title>Rounding specific corners on a container using CSS3</title>
<style type="text/css">
div {
margin-bottom: 20px;
padding: 10px;
background: rgba(10%, 10%, 10%, 0.3);
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, urna placerat condimentum vehicula, magna est suscipit leo, auctor laoreet erat massa eget tellus. Etiam pharetra, orci eu gravida tempus, enim est venenatis diam, id facilisis justo ante ut arcu. Sed nibh eros, porta ac porta ac, fermentum ut ante. Etiam pulvinar consectetur urna sit amet fermentum. Aliquam quis pellentesque tortor. In ut lobortis enim. Pellentesque luctus orci nec massa lacinia consectetur. Etiam cursus, leo et pellentesque tempus, diam elit interdum ipsum, sed pulvinar nibh justo vel urna. Phasellus ligula elit, sodales eget aliquet et, ullamcorper ut lorem. Praesent eget quam id ligula iaculis tincidunt eu et nulla. Ut dui dui, dictum sed lobortis eu, porta nec urna. In adipiscing, massa sed scelerisque elementum, tortor massa cursus velit, ut tincidunt mi lacus id magna. Morbi vestibulum venenatis massa sit amet convallis. Aliquam erat volutpat.</div>
<div id="d2">Nam a lacus ante, a tincidunt dolor. Sed felis dolor, ullamcorper vitae luctus at, iaculis eu dui. Mauris ullamcorper nisl id tortor elementum mattis. Aenean ut ligula ac ipsum pharetra dapibus. Praesent convallis tincidunt ligula sit amet adipiscing. Morbi massa mauris, mollis ornare mollis ut, imperdiet nec nibh. Praesent sollicitudin tellus at nisl sodales lobortis euismod purus laoreet. Vivamus nec urna vel nibh volutpat rhoncus quis eget justo. Donec mi lacus, dapibus nec tristique eu, fringilla id mi. Maecenas vitae odio a tortor cursus fermentum eu eget eros. Vestibulum sit amet metus purus. Integer vestibulum sem nec justo facilisis tempor non sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget mattis metus.</div>
<div id="d3">Proin lacinia sem fringilla est lacinia facilisis. Praesent turpis massa, bibendum eu ultrices ut, viverra vitae quam. Morbi a lorem mi, eget congue arcu. Sed dapibus molestie neque, eget tempus nibh viverra at. Praesent sit amet vestibulum ipsum. Donec in lectus ac urna accumsan feugiat. Sed at nunc felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec ipsum justo. Nullam laoreet enim vel quam tincidunt imperdiet. Maecenas sollicitudin nulla a metus ornare tempus. Nullam rhoncus fermentum lorem id pellentesque.</div>
</body>
</html>
源码下载:
分享到:
相关推荐
css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件 css3.htc 兼容IE8圆角 需引入的文件
div css圆角代码各种圆角表格_圆角边框css圆角
css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角css圆角
iecss3.htc css3圆角支持文件
为HTML网页做圆角。汇集css 无图片圆角,CSS圆角区块容器,div + CSS 圆角矩,WEB2.0 圆形边框 div 使用 css 做法。
HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...
table 圆角 html5 css3
超简单!使用CSS制作圆角表格 3步搞定
css圆角边框css圆角边框css圆角边框css圆角边框css圆角边框
CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件CSS圆角组件
CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些...CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这.....
没有用任何的DIV嵌套,就单独一个DIV,纯CSS控制,无任何JS代码,在火狐下面圆角
用js实现css3效果的圆角方法,代码简洁方便,效果很不错,跟大家分享一下!!
支持IE页面输入框圆角,完美解决。记得阅读里面的文档帮助
很简单的css圆角~让你突破css的困扰
css3实现圆角矩形 使用border-radius实现圆角,兼容到IE6
这是一个css3里的属性处理圆角技术的问题,其中也包括用全用js处理圆角问题,在这里提供大家,希望对大家做网页有点用
css3中的边框一般多为矩形,也可以通过设置实现圆角边框的效果,通过border-radius:;通过设置该属性值得大小改变边框的圆角大小,从而达到自己需要的圆角边框效果
DIVCSS5圆角实例 CSS3版本圆角实例, 支持低版本IE6-IE9浏览器
目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...