1. 圆角，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>
  2. 边框背景 
    • <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区域向外裁剪背景)
  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. Java中传参的值传递和引用传递问题（转）

    今天遇到了一个java程序,需要用参数来返回值(虽然最后用另一种方法实现了),在网上看到这样一篇文章,很受启发. 本文章来自于http://hi.baidu.com/xzhilie/blog/item ...

  2. 转:使用xhprof进行线上PHP性能追踪及分析

    原文来自于:http://avnpc.com/pages/profiler-php-performance-online-by-xhprof 原创作者:AlloVince 之前一直使用基于Xdebug ...

  3. 应用hexo（rss插件）

    使用RSS插件,来生成rss信息. 装载RSS插件 hexo根目录下进入git命令台 npm install hexo-generator-sitemap 启用RSS插件 hexo根目录下的 _con ...

  4. unix io 模型浅析

    POSIX中对同步IO和异步IO的规定: 同步IO操作:引起进程的阻塞直到IO操作完成,异步IO操作:IO操作不会引起进程阻塞 在UNIX下,有5中操作模型: 阻塞IO,非阻塞IO,IO复用,信号驱动 ...

  5. STM32F10x 学习笔记6（USART实现串口通讯 2）

    这次讲讲利用串口收发中断来进行串口通讯.STM32 上为每个串口分配了一个中断.也就是说无论是发送完成还是收到数据或是数据溢出都产生同一个中断.程序需在中断处理函数中读取状态寄存器(USART_SR) ...

  6. 【HDOJ】1483 Automatic Correction of Misspellings

    水模拟题. /* 1483 */ #include <cstdio> #include <cstring> #include <cstdlib> #define M ...

  7. Linux下高并发网络编程

      Linux下高并发网络编程 1.修改用户进程可打开文件数限制 在Linux平台上,无论编写客户端程序还是服务端程序,在进行高并发TCP连接处理时, 最高的并发数量都要受到系统对用户单一进程同时可打 ...

  8. 【STL】【模拟】Codeforces 696A Lorenzo Von Matterhorn

    题目链接: http://codeforces.com/problemset/problem/696/A 题目大意: 一个满二叉树,深度无限,节点顺序编号,k的儿子是k+k和k+k+1,一开始树上的边 ...

  9. 滑雪 （搜索）（dp）（贪心）

    以每一点为起点找出所有路径,并求出以此点做为起点的最大路径 求出每个点的最大路径后再找出其中最大的值,输出最大值 #include <stdio.h>#include <string ...

  10. [Hibernate] List 映射例子

    List 是 java 集合的一个工具,存储线性的数据,允许重复数据.开发者可以准确控制在 list 那个位置插入数据.本例子演示 Java 的 List 集合和 MySQL 数据库的映射应用. 使用 ...