zoukankan      html  css  js  c++  java
  • CSS3新增UI样式

    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- 边框宽度
      • 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布局中——导航是非常常见的
    a标签中的label在IE下触发不了a标签的href链接(label标签——解析)
    table中tr使用toggle不好,选择换一张方式
    css的框架——global.css
    css3属性及事例
    HTML5和CSS3的网站
    利用@media screen实现网页布局的自适应
    关于web中的自适应布局
    css中position:relative的真正理解
    计算时间间隔的js
  • 原文地址:https://www.cnblogs.com/donghualei/p/4870818.html
Copyright © 2011-2022 走看看