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选 ...
随机推荐
- 在iOS7中修改状态栏字体的颜色-b
状态栏的字体为黑色: UIStatusBarStyleDefault 状态栏的字体为白色: UIStatusBarStyleLightContent 一.在 info.plist 中,将 View ...
- 粗谈CGI
先看看 维基百科上面关于 CGI的介绍http://zh.wikipedia.org/wiki/%E9%80%9A%E7%94%A8%E7%BD%91%E5%85%B3%E6%8E%A5%E5%8F% ...
- 关于Java（标识符规则）
Java 是大小写敏感的语言. Java 标识符组成 Java 标识符组成: 字母,数字,下划线和美元符 $ Java 标识符规则 仅包含 字母,数字,下划线和美元符 开头不能使数字 不能使 Java ...
- github+Hexo快速搭建个人博客
注意 本文主要针对Windows平台和Hexo 3.x 准备工作 下载Git [下载地址] [Git官网](https://git-scm.com/download/) 下载Node.js [下载地址 ...
- jQuery Asynchronous
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html http:// ...
- Jump
hdu4862:http://acm.hdu.edu.cn/showproblem.php?pid=4862 题意:给你n*m的方格,每个方格中有一个数(0---9),然后你每次可以选择一个点开始,这 ...
- Js中的window.parent ,window.top,window.self详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- php pack、unpack、ord 函数使用方法
string pack ( string $format [, mixed $args [, mixed $... ]] ) Pack given arguments into a binary st ...
- android 随手记 自定义广播通知栏
自定义通知栏图标?不是很简单么.自定义布局都不在话下! 是的,有xml布局文件当然一切都很简单,如果不给你布局文件用呢? 听我慢慢道来! 首先怎么创建一个通知呢? 1.new 一个 Notificat ...
- 【KMP】【最小表示法】NCPC 2014 H clock pictures
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1794 题目大意: 两个无刻度的钟面,每个上面有N根针(N<=200000),每个 ...