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. javascript-Cookie的应用

    在我平时开发网页的过程中,可能涉及到浏览器本地的存储,现在主流的浏览器存储方式有:cookie,直接读取xml,userData,H5 的LocalStorage等,Cookie存储数据有限,但对于数 ...

  2. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  3. python学习第十六天 --继承进阶篇

    这一章节主要讲解面向对象高级编程->继承进阶篇,包括类多继承介绍和继承经典类和新式类属性的查找顺序不同之处. 多继承 上一章节我们讲到继承,子类继承父类,可以拥有父类的属性和方法,也可以进行扩展 ...

  4. Pyhon + Django 1.7.2 tutorial + virtualenv简单使用

    最近工作中要用到python,先前没怎么接触过,把python本身的语法以及特性撸过一边之后,这两天按着django官方的文档倒腾了几天, 文档非常详细,本人英语水平也就那样,大体没什么压力,建议像我 ...

  5. POJ 2250(LCS最长公共子序列)

    compromise Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u   Descri ...

  6. 学c语言做练习之文件

    打开两个文件,让程序打印第一个文件的第一行,第二个文件的第一行,第一个文件的第二行,第二个文件的第二行,依此类推,直到打印完行数较多的文件的最后一行. #include<stdio.h> ...

  7. Unity脚本获取内存和FPS

    using System; using System.Collections.Generic; using UnityEngine; public class Debugger : MonoBehav ...

  8. Forward Proxy & Reverse Proxy | 正向代理 和 反向代理

    对请求和响应内容不做修改的转发的服务器,被称为代理服务器.代理服务器分为两种类型:正向代理 和 反向代理. 正向代理:面向互联网,从更广范围获取信息的代理. 反向代理:面向内部,一般用于某企业的网站的 ...

  9. 总结Python的思维导图

    Python基础的思维导图:

  10. HTTP学习笔记2-请求结构

    8,HTTP请求 客户端通过发送HTTP请求向服务器请求对资源的访问. HTTP请求由三部分组成,分别是:请求行,消息报头,请求正文. 9,HTTP请求-请求行 请求行以一个方法符号开头,后面跟着请求 ...