CSS3卷角
众所周知,border-radius 属性可以用来设置圆角,但很少人知道它还可以做很多不规则的犄角、卷角(rounded corners)
工作原理:
一、独立属性:border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
语法
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]
栗子
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
它的两个值,依次决定水平和垂直方向上的半径,进而决定了边角的曲率。下图给出了几个例子
二、简写属性:border-radius
语法
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]
栗子
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;
第一组的四个值对应四个角的水平半径,‘/’后面的值对应垂直半径,如果省略了右下,那么它和左上一样。
图例
#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
} #Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
} #Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
} #Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
} #Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
} #Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}
CSS3卷角的更多相关文章
- 怎样使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息. 一个经常使用设计是使用书签形状. 我们能够给书签加入卷角效果.以使其更为逼真.所谓的"卷角"实际上能够用小角度倾斜的阴影效果来模拟. ...
- CSS3知识之折角效果
CSS3折角效果:可兼容不同背景
- 如何使用CSS3创建一个漂亮的图标
演示 下载 今天,我想展示给你一个巧妙的花招.我们将创建一个纯CSS3文本图标.更让人震惊的是,这效果将只需要一个HTML元素. 游戏的计划 创建一个矩形盒子 设置圆角 使用伪类元素创建一个卷角效果 ...
- CSS3 box-shadow实现纸张的曲线投影效果
一般的投影效果,尤其通过CSS实现的投影效果(无论是CSS3,还是IE滤镜),都是直来直往的.纸张是有卷角的,其投影就是曲面的,如何使用CSS模拟出纸张的卷边曲线投影效果. <div class ...
- CSS3 之书页阴影效果
视觉如下: CSS3 之书页阴影效果: <html> <head> <meta charset="UTF-8"> <title>书页 ...
- CSS3 画基本图形,圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- 使用Sass和Compass组合写CSS
最近开始在尝试开始使用Sass来写CSS代码,刚开始虽然还是不太习惯用链式的方式写css,不过这是暂时的阶段. 如果你还不了解Sass,可以看之前发表过的文章来了解详情,Sass主要有下面这几种特性( ...
- UML建模之时序图
现在是二月,而且到如今你或许已经读到.或听到人们谈论UML 2.0 —— 包括若干进步的 UML 的新规范,所做的变化.考虑到新规范的重要性,我们也正在修改这个文章系列的基础,把我们的注意力从 OMG ...
随机推荐
- 十种JAVA排序算法实例
一.冒泡(Bubble)排序 复制代码 代码如下: void BubbleSortArray() { for(int i=1;i<n;i++) { for ...
- strcpy, memcpy, memset函数
一. strcpy函数 原型声明:char *strcpy(char* dest, const char *src); 头文件:#include <string.h> 和 #inclu ...
- mybatis动态sql中where标签的使用
where标记的作用类似于动态sql中的set标记,他的作用主要是用来简化sql语句中where条件判断的书写的,如下所示: <select id="selectByParams&qu ...
- commonJS — 通用方法(for COM)
for COM github: https://github.com/laixiangran/commonJS/blob/master/src/forCOM.js 代码 /** * Created b ...
- Lua 栈中元素的位置
Lua与C.C#等的交互是通过栈来实现的,每次插入元素都是放在栈顶(top),至于元素的index,可以使用正数和负数两种方式, 如取栈底开始至第index个元素 -index = gettop - ...
- VC++源文件编码
目录 第1章源代码文件 1 1.1 研究思路 1 1.2 实验结果 3 1.3 #pragma setlocale 4 1.4 /source-charset 5 1.5 ...
- linux笔记:linux常用命令-文件处理命令
文件处理命令:touch(创建空文件) 文件处理命令:cat(显示文件内容) 文件处理命令:more(分页显示文件内容) 文件处理命令:head(显示文件前面几行) 文件处理命令:tail(显示文件后 ...
- python 练习 5
#!/usr/bin/python # -*- coding: utf-8 -*- from collections import deque def z69(): '''猜牌术(1) 魔术师,最上面 ...
- css写宽为30%的正方形
如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...
- (31)odoo中的时间
* 在model中 from datetime import datetime, timedelta import time from openerp.tools impor ...