下面的例子展示了你如何使用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>
源码下载：
分享到：
相关推荐
在网页设计中，`div` 和 `CSS` 是不可或缺的部分，尤其当涉及到界面美观和用户体验时，圆角设计显得尤为重要。圆角边框不仅能够使网页元素看起来更加柔和，还能提升整体设计的现代感。本篇文章将深入探讨如何使用 `...
在网页设计中，使用CSS（层叠样式表）来创建美观、功能丰富的界面是至关重要的。其中，制作圆角表格是一项常见的需求，尤其在追求现代感与用户友好体验的设计中。本文将详细介绍如何通过简单的三步骤，利用CSS来实现...
- 在本示例中，圆角表格主要是通过一个`<div>`元素来实现的。这个`<div>`元素拥有一个特定的ID——`nifty`。 - 圆角效果是通过嵌套的`<b>`标签来模拟的。这些`<b>`标签被赋予了不同的类名（如`.rtop`和`.rbottom`...
在现代网页设计中，实现图片圆角效果是一个常见的需求，这可以使页面看起来更加精致和专业。本文将深入探讨如何使用CSS来实现图片的圆角处理，并通过JavaScript进行增强。 首先，我们来看CSS如何实现图片的圆角效果...
总结来说，实现圆角效果主要依赖CSS3的`border-radius`属性，对于老浏览器和特定需求，可以借助JavaScript进行辅助。在实际开发中，应考虑兼容性和性能，选择合适的方法来实现圆角效果。无论是在div、背景色还是图片...
然而，在这个特定的示例中，使用了旧版的 CSS 技巧来模拟圆角效果，因为早期的浏览器可能不支持 `border-radius`。这个技巧基于创建多个内部 `div` 元素，每个元素都有不同的边距和背景色，以形成一个渐变的圆角。...
最后，如果希望导航菜单在鼠标点击后有选中状态，可以使用`:active`伪类，或者创建一个额外的`.selected`类，并在JavaScript中动态添加和移除。 总的来说，使用`div+css`实现圆角导航菜单需要理解HTML结构、CSS选择...
这是一个JavaScript库，它使用VML和其他技术来模拟一些CSS3的特性，如圆角、阴影和渐变，使得在旧版IE中也能实现这些效果。 关于标签"div+css+js"，在实现这些效果时，通常会使用div元素作为主要的布局容器，通过...
在本案例中，我们学习了如何利用CSS的`border-radius`、定位、显示模式、过渡效果以及选择器来创建一个具有圆角的二级下拉菜单。这仅仅是CSS强大功能的一小部分，继续深入研究，你将能够构建出更多复杂的交互式用户...
在CSS3中，伪类选择器如`:hover`、`:focus`等非常有用，它们可以在特定事件发生时改变元素的样式。例如，当鼠标悬停在登录表单上时，可以利用`:hover`改变容器的旋转角度，使表单翻转展示更多信息。同样，`:focus`...
在上述代码中，`.box`元素将会拥有一个红色的背景，且四角皆为10像素的圆角。 现在，我们转向“CSS+DIV圆角横条效果”。这种效果通常是通过创建一个具有特定宽度和高度的DIV元素，并应用上述的`border-radius`属性...
在Web设计中，使用CSS创建圆角矩形可以提升网站的视觉效果。本文档介绍了两种不同的方法来实现圆角矩形：一种是简洁型CSS圆角矩形；另一种是带有3D效果的CSS圆角矩形。 #### 二、简洁型CSS圆角矩形 **1. CSS代码...
在提供的文档中，作者提到了一个使用纯CSS创建圆角边框的方法，该方法受到百度知道的启发。这种方法依赖于浮动元素和溢出隐藏来创建视觉上的圆角效果，而不需要使用图像或者浏览器特定的CSS属性。 首先，通过创建多...
这篇文档将深入探讨“绿色圆角CSS3+html5博客模板-蓝色 css3 html5 博客 标准.rar”这个压缩包中的技术知识点，主要关注HTML5和CSS3的应用，以及它们如何协同构建一个现代、标准的博客模板。 HTML5是超文本标记语言...
在这个特定的案例中，我们关注的是如何使用`div`元素结合CSS3属性来创建一个3D时间轴排列的文字列表效果。这种效果通常用于展示项目历史、里程碑或事件序列，既具有清晰的结构，又能吸引用户注意力。 首先，我们...
在纯CSS3相册中，我们可以使用更复杂的选择器来定位和操作DOM元素，如类选择器、ID选择器、伪类选择器（如`:hover`用于鼠标悬停效果）以及属性选择器等，这使得我们能精确地控制每个相册项的状态和行为。 接着，CSS...
7. **Flexbox布局**：为了实现图标在容器内的灵活布局，可以使用CSS3的Flexbox模型。这使得在不使用JavaScript的情况下就能实现居中对齐、等间距排列等复杂布局。 在“texiao8336_1560929568”这个压缩包文件中，很...
在本文中，我们将深入探讨如何使用CSS3来创建一款精美的图标菜单，它具有下拉展开、收缩切换的特效，并且包含弹性动画效果。这款特效完全由CSS3实现，不依赖任何JavaScript代码，展现了CSS3的强大功能。 首先，让...