用CSS3将你的设计带入下个高度[译]（9）
作者：神采飞扬 来源：前端观察 发布时间：2009-06-22 13:03:00
标签：设计,css3,hack,工具
8. 圆角（边框半径）
Border-radius 无需背景图片就能给HTML元素添加圆角。现在，它可能是使用最多的CSS3属性了，很简单的原因是使用圆角比较好而且不会对设计和可用性有冲突。
不同于添加Javascript或多于的HTML标签，仅仅需要添加一些CSS属性并从好的方面考虑。这个方案是清晰的和比较有效的，而且可以让你免于花费几个小时来寻找精巧的浏览器方案和基于Javascript圆角。
Sam Brown的博客在标题、分类和链接处使用了border-radius.
Sam Brown在他的博客的标题、分类、链接和div中大量的使用了border-radius属性。使用图片来实现该效果将会比较费时的，这是在项目中使用CSS3属性是提高开发效率的重要步骤的原因之一
为了给类别链接添加圆角，Sam 使用了下面的CSS片段：
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
我们可以做的更进一步，添加原始的CSS3 属性和Konqueror 属性扩展，如下:
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
如果我们想在我们的元素中的某个特定的角上应用此属性，我们可以单独的指定每个角：
div {
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
浏览器支持： border-radius只有所有版本的IE浏览器和Opera不支持，Webkit和Gecko核心的浏览器都支持。
扩展阅读：
0
投稿猜你喜欢
- 最近刚好在学习python+scrapy的爬虫技术，因为mac是自带python2.7的，所以安装3.5版本有两种方法，一种是升级，一种是额
- isnull在数据库查询中的应用，特别是再语句连接的时候需要用到 比如连接时候，某个字段没有值但是又要左连接到其他表上 就会显示空， isn
python列表元素去重后如何保持原来的顺序不变原列表：list1 = [1,2,1,4,9,3,5,2,6,7,3,1,6,8,4,0]去- 准备软件:1. J2SDK(1.5.0): jdk-1_5_0-linux-i586-rpm.bin2. Apache(2.0.53): h
- 1、Introduction之前写过一篇文章：Mysql主从同步的原理。相信看过这篇文章的童鞋，都摩拳擦掌，跃跃一试了吧？今天我们就来一次m
- 目录一、字符串：二、使用：（1）空字符串和 len( ) 函数（2）转译字符（ \ ）（3）字符串拼接（4）字符串复制（
- 方法1： 用SET PASSWORD命令MySQL -u rootmysql> SET PASSWORD FOR 'root&
- 1. 数据处理中很恶心，出现 RuntimeWarning: divide by zero encountered in divide发现自
- 在mysql数据库中，mysql key_buffer_size是对MyISAM表性能影响最大的一个参数(注意该参数对其他类型的表设置无效)
- 之前一直使用QtCreator，在设计界面时非常方便，python早就集成了Qt模块，在python中以pyQt的包存在，目前常用的是pyQ
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 18 - Classes part IClass（
- 一、使用dotnet add package 命令行实现首先可以去这个网站：https://www.nuget.org/ 查找想要添加的引用
- 显示大图和隐藏大图的js代码：<script type="text/javascript"> &n
- 语法分析器描述了一个句子的语法结构，用来帮助其他的应用进行推理。自然语言引入了很多意外的歧义，以我们对世界的了解可以迅速地发现这些歧义。举一
- 程序二：addforum.php <html> <head> <link&
- pthon更换文档中某元素：with open('E:\\桌面\\train.txt', 'r') as f
- <?php date_default_timezone_set("PRC"); $host = stripslas
- 一、基础内容import tkinter as tkfrom PIL import Image,ImageTkdef my():
- 前言对话框是很常用的组件 ， 在很多地方都会用到，一般我们可以使用自带的alert来弹出对话框，但是假如是设计出的图该怎么办呢 ，所以我们需
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
