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. 遮罩

css新增属性的更多相关文章

  1. css新增属性之边框

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 边框属性 属性 说明 border-radius 设置边框圆角 border-image 设置图像边框 border-shadow 设置边框阴 ...

  2. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  3. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  4. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  5. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. HTML5新增属性

    [sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...

  8. 第七篇、CSS3新增属性

    <!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...

  9. Css新增内容

    css3新增属性 可节省设计时间的属性 border-color:控制边框的颜色,并且有更大的灵活性,可以产生渐变效果 border-image:控制边框图像 border-radius:能产生类似圆 ...

随机推荐

  1. js移动设备手机跳转地址代码

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...

  2. Python文件处理之文件指针（四）

    当我们读取文件内容时,并不能重复的读取,比如一个blogCblog.txt文件里有blogCblog内容,用两个read()方法读取blogCblog.txt的内容,会发现,第一个返回文件内容,第二个 ...

  3. Memcached源码分析——process_command函数解析

    以下为个人笔记 /** * process_command 在memcached中是用来处理用户发送的命令的, * 包括get set,add,delete,replace,stats,flush_a ...

  4. Memcached源码分析——hash

    以下为memcached中关于使用的hash算法的一点记录 memcached中默认使用的是Bob Jenkins的jenkins_hash算法 以下4段代码均在memcached-1.4.22/ha ...

  5. Spark笔记--使用Maven编译Spark源码(windows)

    1. 官网下载源码 source code,地址: http://spark.apache.org/downloads.html 2. 使用maven编译: 注意在编译之前,需要设置java堆大小以及 ...

  6. Steps

    uva846:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_proble ...

  7. 作了点有意义 的事，加入CLOUDSTACK官方文档的中文翻译工作

    https://www.transifex.com/ 昨天到今天,作了个部署构架方面的翻译.

  8. 使用MFC开发有十多年了，结合自身的体会，随便说几句（不能样样都依赖别人，C体系的人，绝对不怕人踢馆）

    挺长时间了吧,这个帖子还没沉下去,使用MFC开发有十多年了,结合自身的体会,随便说几句:1.MFC是一个C++的基础类库,封装了绝大多数的API函数,主要是用来创建带UI的应用程序,服务端程序或着不带 ...

  9. -_-#ueditor编辑器chrome浏览器下只能复制最后一行

    被过滤掉了

  10. C#编译时出现“不安全代码只会在使用 /unsafe 编译的情况下出现”错误的解决

    原因是:在编译的代码里面有不安全类型unsafe方法或类!解决方法:将项目属性页中生成下的“允许不安全代码”复选框打上对勾即可,方法如下:项目属性对话框->生成->允许不安全代码块 选中即 ...