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

      1. <head>
      2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      3.     <title>无标题文档</title>
      4.     <style>
        　　    // 如果是两个数字，则左上角和右下角一样，右上角和左下角一样
      5.         .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;}
      6.     </style>
      7. </head>
      8. <body>
      9.     <div class="box"></div>
      10. </body>
      1. <head>
      2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      3.     <title>无标题文档</title>
      4.     <style>
      5.         // 100px/150px表示每个角的水平和垂直，同时可以前面四个/后面四个，则分别表示四个角的水平和四个角的垂直
      6.         .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px;}
      7.     </style>
      8. </head>
      9. <body>
      10.     <div class="box"></div>
      11. </body>
  2. 边框背景 
      1. <head>
      2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      3.     <title>无标题文档</title>
      4. <style>
      5.     .box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:10px;border-right-width:10px;}
      6. </style>
      7. </head>
      8. <body>
      9.     <div class="box"></div>
      10. </body>
    • 线性渐变 
      1. <head>
      2.     <meta http-equiv="Content-Type" content="textml; charset=utf-8">
      3.     <title>无标题文档</title>
      4. <style>
      5.     .box{width:300px;height:300px;border:10px solid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}
      6. </style>
      7. </head>
      8. <body>
      9.     <div class="box"></div>
      10. </body>
    • 可以设置多个背景 
      1. <head>
      2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      3.     <title>无标题文档</title>
      4.     <style>
      5.         .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;}
      6.     </style>
      7. </head>
      8. <body>
      9.     <div class="box"></div>
      10. </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区域向外裁剪背景)
  3. 遮罩

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

  1. css选择器和新增UI样式总结

    经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.

  2. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  3. css新增UI样式

    1.圆角 border-radius <style> .box{width:200px;height:300px;border:1px solid #000;border-radius:1 ...

  4. css新增UI方案

    一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body& ...

  5. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  6. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  7. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  8. css3新增功能

    CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 ...

  9. CSS选择器及CSS3新增选择器

    转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...

随机推荐

  1. vs2013update4 vs-mda-remote cordova真机测试ios 解决里面一个坑

    sudo npm install -g vs-mda-remote --user=你的用户名 此步骤为安装vs-mda-remote,如果安装成功 执行vs-mda-remote –secure fa ...

  2. bzoj1662: [Usaco2006 Nov]Round Numbers 圆环数

    Description 正如你所知,奶牛们没有手指以至于不能玩“石头剪刀布”来任意地决定例如谁先挤奶的顺序.她们甚至也不能通过仍硬币的方式. 所以她们通过"round number" ...

  3. 【技术贴】解决前台js传参中文乱码

    方法1: 前台两次编码,后台一次解码.因为getParamet已经自动解了一次了. JavaScript: window.self.location="list.jsp?searchtext ...

  4. 45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧，技巧和最佳实践)

    As you know, JavaScript is the number one programming language in the world, the language of the web ...

  5. WPAD 的原理及实现

    WPAD 通过让浏览器自动发现代理服务器,使代理服务器对用户来说是透明的,进而轻松访问互联网.WPAD 可以借助 DNS 服务器或 DHCP 服务器来查询代理自动配置(PAC)文件的位置. 引言 代理 ...

  6. HYPER-V2008里安装WINDOWS 2012,以及监控宝

    呵呵,这两者有关系么?没关系.哈哈. 为了方便就放一起了. 至少,2008里的HYPERV能安装2012,倒是给我很多欣慰.

  7. 整整68页学习C++的文章

    有空看看,有不少好东西: http://dev.21tx.com/language/c/index.shtml

  8. c++实现委托

    #include "stdafx.h" #include <iostream> #include <string> using namespace std; ...

  9. Linux kernel ‘key_notify_policy_flush’函数信息泄露漏洞

    漏洞名称: Linux kernel ‘key_notify_policy_flush’函数信息泄露漏洞 CNNVD编号: CNNVD-201307-072 发布时间: 2013-07-05 更新时间 ...

  10. Keepalived实现Redis Failover

    一.环境说明 操作系统版本:RHEL 5.4_64 redis版本:2.8.17 keepalived版本:1.1.15 master:10.142.130.81 slave:  10.142.130 ...