CSS3新增UI样式

圆角，border-radius: 1-4个数字/1-4个数字，前面是水平，后面是垂直，不给“/”表示水平和垂直一样，举例如下：

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    <style>
　　    // 如果是两个数字，则左上角和右下角一样，右上角和左下角一样

        .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}

    </style>

</head>

<body>

    <div class="box"></div>

</body>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    <style>

        // 100px/150px表示每个角的水平和垂直，同时可以前面四个/后面四个，则分别表示四个角的水平和四个角的垂直

        .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}

    </style>

</head>

<body>

    <div class="box"></div>

</body>

边框背景

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

<style>

    .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}

</style>

</head>

<body>

    <div class="box"></div>

</body>

线性渐变

<head>

    <meta http-equiv="Content-Type" content="textml; charset=utf-8">

    <title>无标题文档</title>

<style>

    .box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}

</style>

</head>

<body>

    <div class="box"></div>

</body>

可以设置多个背景

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    <style>

        .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}

    </style>

</head>

<body>

    <div class="box"></div>

</body>

border-image:边框图片
border-image-source: 引入图片
border-image-slice: 切割图片
border-image-width: 边框宽度
border-image-repeat: 图片的排列方式（round 平铺， repeat 重复， stretch 拉伸）
border-colors：边框颜色
背景尺寸： background-size: x, y (100% 100%)
background-origin: border | padding | content -box，分别表示从border区域开始显示背景，从padding区域开始显示背景，从content区域开始显示背景
border-clip : border(从border区域向外裁剪背景)， padding(从padding区域向外裁剪背景)，content(从content区域向外裁剪背景)

遮罩

CSS3新增UI样式的更多相关文章

css选择器和新增UI样式总结
经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.
CSS3 新增文本样式
CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影可以给文字添加阴影效果了 Shadow 影子语法: text-sha ...
css新增UI样式
1.圆角 border-radius <style> .box{width:200px;height:300px;border:1px solid #000;border-radius:1 ...
css新增UI方案
一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body& ...
认识CSS3新增选择器和样式
前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...
CSS系列：CSS3新增选择器
1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选 ...
CSS3新增的选择器和属性
<!doctype html>无标题文档一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号选择器含义实例 1 E[att^="val&qu ...
css3新增功能
CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...
CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选 ...

随机推荐

codevs 1078 最小生成树
题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这 ...
Google测试精华文章(1) - 测试行为，而非实现
Your trusty Calculator class is one of your most popular open source projects, with many happy users ...
maven解决.lastUpdated maven无法下载jar
话说,这个问题困扰了我两个多月了已经~~~ 后来发现不知道被谁动了,把我的仓库没有放到仓库组里面~~~ 用admin登录进去,默认密码是admin123,然后看截图操作吧. (记得删除你本地报错说** ...
Top WAF
http://blog.csdn.net/force_eagle/article/details/9396087
DELL 720XD和R820玩赏
bit、sbin、sfr、sfr16 区别分析
1.bit 和 sbit 都是 C51 扩展的变量类型. bit 和 int char 之类的差不多,只不过 char=8 位, bit=1 位而已.都是变量,编译器在编译过程中分配地址.除非你指定, ...
使用 libevent 和 libev 提高网络应用性能
使用 libevent 和 libev 提高网络应用性能 Martin C. Brown, 作家, Freelance 简介: 构建现代的服务器应用程序需要以某种方法同时接收数百.数千甚至数万个事件, ...
awk合并文件一例
群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...
QTP自传之测试报告
前言测试报告是测试阶段的最后产出,也是最重要的产出,自动化测试报告也是如此.前期所做的工作,添加对象.编写脚本等都是为了可以生成一份正确.严谨的测试报告.我作为一款功能全面的自动化测试工具,毫无疑问 ...
《A First Course in Probability》-chaper6-随机变量的联合分布-独立性
在探讨联合分布的时候,多个随机变量之间可以是互相独立的.那么利用独立性这个性质我们就能够找到一些那些非独立随机变量没有的求解概率的方法. 对于离散型随机变量的独立联合分布: 离散型随机变量X.Y独立, ...

CSS3新增UI样式

CSS3新增UI样式的更多相关文章

随机推荐

热门专题