border-radius | 易学教程

使用css打造形形色色的形状！

阅读更多关于使用css打造形形色色的形状！

　　css是非常强大的工具，如果我们掌握的好，那么许多复杂的形状不需要使用图片而直接使用css完成即可，这不仅有利于减少http请求以增强性能还便于日后的管理和维护，一举两得！这篇博文会主要介绍一些常见的图形，如圆、椭圆、三角形、平行四边形、菱形、切角效果等等。　　　　由于这篇博文中的多数实现代码用到了css3，鉴于篇幅有限，所以大家如果对css3不太了解可以先看我的博文《强大的css3 》。第一部分：圆　　用css创建一个圆是很简单的，只需要把border-radius的值设置位宽和高的一般即可，代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>梯形</title> <style> div{ width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50px; background: red; color:white; } </style> </head> <body> <div>918之初</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css3.0实现的各种形状

阅读更多关于 css3.0实现的各种形状

#square { width: 100px; height: 100px; background: red; } 有兴趣的话，最好是自己试试以下！······ #rectangle { width: 200px; height: 100px; background: red; } #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } /* Cleaner, but slightly less support: use "50%" as value */ #triangle-up { width: 0; height: 0; border

The Shapes of CSS（css的形状）

阅读更多关于 The Shapes of CSS（css的形状）

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser. （下面的所有内容只使用一个HTML元素。任何一种CSS都可以，只要它在至少一个浏览器中支持。） Square （正方形） /*--> */ /*--> */ #square { width: 100px; height: 100px; background: red; } Rectangle （长方形） /*--> */ /*--> */ #rectangle { width: 200px; height: 100px; background: red; } Circle （圆形） /*--> */ /*--> */ #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but slightly less support: use "50%" as value */ 半圆形（Semicircle）扇形

45个值得收藏的 CSS 形状

阅读更多关于 45个值得收藏的 CSS 形状

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 1.正方形 #square { width: 100px; height: 100px; background: red; } 2.长方形 #rectangle { width: 200px; height: 100px; background: red; } 3.圆形 #circle { width: 100px; height: 100px; background: red; border-radius: 50% } 4.椭圆形 #oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; } 5

用css3绘制你需要的几何图形

阅读更多关于用css3绘制你需要的几何图形

1、圆形示例: 　　　　　　　　　思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: <div class="size example1"></div> css: .size{ width:200px; height: 200px; background: #8BC34A; } .example1{ border-radius:100px; } 2、自适应椭圆思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。代码如下： html: <div class="example3"></div> css: .example3{ width:200px; height: 150px; border-radius:50%; background: #8BC34A; } 3、自适应的半椭圆:沿横轴劈开的半椭圆思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。第一种方法就是使用它所对应的各个展开式属性： border-top-left-radius border-top-right

在界面中生成头像

阅读更多关于在界面中生成头像

在界面中如何生成头像？示例 HTML CSS 示例 HTML < div class = " container " > < div class = " avatar avatar--green " > < div class = " avatar-body body--green " > < div class = " avatar-eye eye--left " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </ div > </ div > < div class = " avatar-eye eye--right " > < div class = " avatar-eye-pupil pupil--purple " > < span class = " avatar-eye-pupil-blackThing " > < span class = " avatar-eye-pupil-lightReflection " > </ span > </ span > </

利用target的特性，可以实现纯css的tab效果切换

阅读更多关于利用target的特性，可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击 a 标签的时候，连接到 id 是 tab1的div，对这个div 起作用 color:red; 如： <a href="#tab">Test :target</a> <a href="#tab2">Test 2:target</a> <div id="tab">This is a tab.</div> <div id="tab2">This is another tab.</div> #tab:target{ color:red; } #tab2:target{ color:blue; } 结果：点击第一个 a 标签时连接到 id 是 tab的div，对这个div 起作用 color:red; 点击第二个 a 标签时连接到 id 是 tab2的div，不对这个div 起作用 color:red; 利用target的特性，可以实现纯css的tab效果切换具体代码：（ie8以及ie8以下实现不了） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> /

CSS3圆角详解

阅读更多关于 CSS3圆角详解

一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：　　* 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。　　* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况。二、border-radius属性 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。（个人理解）： border-radius:15px(水平偏移像素) 15px(垂直偏移像素) 比如，下面是一个div方框：现在设置它的圆角半径为15px：　　border-radius: 15px; 这条语句同时将每个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为15px。 border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

阅读更多关于 css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

　　　　首先我要介绍的是border-radius属性，它的作用是实现圆角边框，其中border-radius：20px;表示，一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高，如果是正方体则会是一个球，依靠这个属性我们可以不用ps6的情况下，做成一个较为美观的按钮或者控件，它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius，这对我们控制图型有了更准确的把握。　　　　然后要详细介绍的是box-shadow属性，向边框添加阴影，其中它有六个重要的参数。　　　　1.阴影类型：此参数可选，如果不设值，默认的阴影类型是外部阴影，如果取其唯一值“inset”则是内阴影。　　　　2.h-shadow:必有，阴影的水平偏移位置，其值可以是正负值，为正值，其阴影在对象右边，为负值，其阴影在对象左边。　　　　3.v-shadow:必有，阴影的垂直偏移位置，其值也可为正负值，为正值，其阴影在对象的底边，为负值，其阴影在对象的上边。　　　　4.阴影模糊：此参数可选，其值只能为正值，值为0时，表示阴影不具备模糊效果，其值越大则阴影边缘就越模糊。　　　　5.阴影扩展半径：次参数可选，其值可以是正负值

圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image

阅读更多关于圆角效果 border-radius——阴影 box-shadow——为边框应用图片 border-image

1、圆角效果 border-radius border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用 px 单位，你还可以用百分比或者 em ，但兼容性目前还不太好。实心上半圆：方法：把宽度（width）设为高度(height)的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： /*--> */ /*--> */ div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0px 0 50px; } 2、阴影 box-shadow box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow:

订阅 border-radius