现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：
在CSS3中，实现圆角效果是一个非常实用且常见的特性，极大地简化了网页设计的复杂性，无需再依赖于图像切片或者JavaScript插件来创建圆角。标题和描述中提到的关键知识点是`border-radius`属性，这个属性允许开发者直接在CSS中定义元素边框的圆角半径，从而实现各种圆角效果。
`border-radius`属性的引入是W3C为CSS3规范的一部分，旨在提供一种标准化的方法来创建圆角，而不是依赖于各个浏览器的私有扩展。Firefox使用`-moz-border-radius`，而Safari和基于WebKit的浏览器（如Chrome）使用`-webkit-border-radius`作为前缀来支持这一功能。以下是对`border-radius`属性的详细说明：
1. **基本语法**：
`border-radius`属性可以接受一个或两个值，用来设置元素四个角落的圆角半径。如果只设置一个值，它将应用于所有四个角落；如果设置了两个值，第一个值将应用到顶部左右角落，第二个值则应用到底部左右角落。例如：
```css
div {
border-radius: 10px;
}
```
这将为div的所有四个角落设置10像素的圆角。
2. **特定角落的圆角**：
如果需要对单个角落进行更精细的控制，可以使用以下四个独立的属性：
- `border-top-left-radius`
- `border-top-right-radius`
- `border-bottom-left-radius`
- `border-bottom-right-radius`
例如，只让左上角是圆角：
```css
div {
border-top-left-radius: 10px;
}
```
3. **兼容性**：
虽然`border-radius`在现代浏览器中广泛支持，但老版本的Internet Explorer（IE8及以下）并不支持此属性。为了向后兼容，可以使用条件注释或者渐进增强的策略，使用JavaScript库如jQuery UI的`.corner()`方法，或者使用VML（Vector Markup Language）来创建圆角。
4. **数值单位**：
`border-radius`的值可以是长度单位（如px、em、%），也可以是百分比。百分比值是相对于边框宽度计算的，这意味着圆角半径可以动态调整以适应元素大小的变化。
5. **边框半径的限制**：
边框半径的值不能超过边框宽度的一半，否则会产生非预期的效果，可能看起来像一个椭圆形而非圆形。
6. **组合使用**：
在实际项目中，通常会结合其他CSS3属性，如`box-shadow`（阴影效果）和`background-image`（背景图片）等，来创建更丰富的界面元素。
`border-radius`是CSS3中的一个重要特性，它使得创建圆角效果变得更加简单，提高了网页设计的灵活性和响应式设计的能力。在开发时，要注意浏览器的兼容性问题，尤其是在处理旧版IE时。同时，利用`border-radius`与其他CSS3属性的组合，可以创建出更加生动和美观的用户界面。
