zoukankan      html  css  js  c++  java
  • 圆角理论-边框和圆角

      border-radius:的值可以是任意长度的单位,包括px ,cm,em,vm,%等等。

    其中百分比%是相对于方形的width和height而言的。如:

    border-radius:10%;   相对于该div的width , height的长度的10%进行画的圆角。

    -------

        <style type="text/css">
            div{
                height: 200px;
                500px;
                margin: 0 auto;
                background: #f00;
                border-radius: 10%;
            }
        </style>

        <div></div>

    显示如下图,四个角有点乖乖的,10%是相对于width  和  height 的宽度进行画的圆角。如果border-radius:50%;那么就会变成椭圆。

    如果width=height;  border-radius:50%;  那么就会变成一个正圆。如下图所示:

    ------------------------------

    border-radius: a  b  c  d ;  那么就是从左上角开始顺时针转如上图的 1,2,3,4

    如果有四个值,那就是 左上角 右上角  右下角 左下角 一一对应 a b c d 。

    如果是三个值,那就是 左上角a  右上角b  右下角c  右下角b。

    如果是两个值,那就是 左上角右下角a  右上角左下角b。

    如果是一个值,那么全部都是一样的a。

    如下:

    ================================

    正确答案是:A、D

    box-shadow的值对比:

    (1)水平阴影的位置。允许负值。必写;

    (2)垂直阴影的位置。允许负值。必写;

    (3)模糊距离。可选;

    (4)阴影的尺寸。可选;

    (5)阴影的颜色。请参阅 CSS 颜色值。可选;

    (6)可选。将外部阴影 (outset) 改为内部阴影(inset)。

     ==================================================

    border-image: source  slice(30%) /  width(10px) / outset(0px) repeat(round平铺,凑整   stretch拉伸)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .container{
                 200px;
                height: 200px;
                margin: 0 auto;
                margin-top: 100px;
                border: 20px solid red;
                padding: 50px;
                border-image-source: url('image/1.png');
                border-image-slice: 30% ;   /*两个值,一个水平*/


                border-image- 10px;
                border-image-outset: 10px;
                border-image-repeat: repeat;
                border-image: url('image/1.png')  20% / 10px  / 0  repeat;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
    </body>
    </html>

    ----------------------------

    border: 20px solid red;/*一定要设置border样式,在border-image值为:none或无法显示时,就会显示该样式。*/

    border-image-source: url('image/1.png');/*图片地址绝对路径,相对路径,none*/

    border-image-slice: 30% 40%;/*两个值,第一个水平切割,第二垂直切割。可以写四个值,遵循上右下左的顺序。和border-top/right/bottom/right: 顺序一样,不管几个值图片切割出来的一定是九宫格(分别为1,2,3,4,5,6,7,8,9张图片),1,3,7,9一定是在边框的四个顶点处,2,8一定是在水平边框缩放,4,7一定是垂直边框缩放,而5则不会填充。此外,如果只为:fill,那么中间的部分就会被5号图片填满,用在图片按钮时要设置成fill*/

    border-image- 10px;/*切割完按所取的宽度等比例缩放为:10px*/
    值:
    length 带 px, em, in … 单位的尺寸值
    percentage 百分比
    number 不带单位的数字;它表示 border-width 的倍数
    auto 使用 auto, border-image-width 将会使用 border-image-slice 的值


    border-image-outset: 10px;/*图片向边框外扩展10px  不能为负值*/

    border-image-repeat: repeat;/*repeat:重复,不拉伸不凑整。round:平铺,适当拉伸凑整。stretch:拉伸 默认值*/

    border-image: url('image/1.png')  20% / 10px  / 0  repeat;  
    /*这是border-image的复合属性,border-image:source slice/width/outset repeat*/

  • 相关阅读:
    毕设计划(一)
    上传整个项目或者文件夹到github
    分布式架构中数据一致性常见的几个问题(云时代架构文章读后感16)
    关于技术规划、管理、架构的思考(云时代架构文章读后感15)
    互联网高新吗(云时代架构文章读后感14)
    第三方支付账务系统设计难点(云时代架构文章读后感13)
    关于SOA的理解
    系统架构师(云时代架构文章读后感12)
    会话管理(云时代架构文章读后感11)
    【sklearn第二讲】scikit-learn 方法一览图
  • 原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10731430.html
Copyright © 2011-2022 走看看