zoukankan      html  css  js  c++  java
  • CSS3边框

    一、盒子边框

    1、盒子圆角:border-radius:像素或者百分比

    2、盒子阴影:box-shadow

                 属性:X    轴偏移量   , Y   轴便宜量    颜色的虚幻程度    阴影的颜色    阴影的位置  (阴影默认在外部    inset是设置在内部)

                              (偏移量可以使负值,左负右正,上负下正)

    #a1{
                 100px;
                height: 100px;
                border: 1px solid #0000FF;
                background-image: url(QQ图片20180506095022.png);
                background-repeat: no-repeat;
                background-position: 20px 20px ;
                border-radius: 50%;}

    二、背景

    1、引入:background-image:url()

    2、尺寸:size:100% 100%

    3、平铺:repeat:no-repeat

    4、位置:origin:content-box      border-box      padding-box      position:top right left bottom(距左多少,距上多少7)

    三、字体

    1、字体的阴影:text-shadow:x轴  y轴   阴影的模糊程度  阴影颜色

    2、字体溢出显示  over-flow:hidden    white-space:nowap;

    3、英文字体的换行

    ①,word-break:break-all 例如div宽200px,
      它的内容就会到200px自动换行,
      如果该行末端有个英文单词很长(congratulation等),
      它会把单词截断,变成该行末端为conra(congratulation的前端部分),
      下一行为tulation(conguatulation)的后端部分了。

    ②、word-wrap:break-word 例子与上面一样,
             但区别就是它会把congratulation整个单词看成一个整体,
             如果该行末端宽度不够显示整个单词,
             它会自动把整个单词放到下一行,
             而不会把单词截断掉的。
    #a2{
                 200px;
                height: 50px;
                border: 1px solid chartreuse;
                word-break: break-word;
                
            }

    四、透明度

    1、opcity:0~1     越小越透明

    2、background-color,rgba():

    五、渐变色

    1、background-image:linear-gradient(指向方向,颜色1,颜色2,颜色3):

    #a3{
                 200px;
                height: 100px;
                border: 1px solid #7FFF00;
                color: black;
                background-image: linear-gradient(to top,blue,yellow,red);
                
            }

    六、图片

    1、img:src

    2、鼠标移上显示(注释)

    3、图片的圆角:border-radius

    4、图片的阴影:box-shadow

    5、图片的滤镜:filter

  • 相关阅读:
    RUST实践.md
    redis.md
    opencvrust.md
    aws rds can't connect to mysql server on 'xx'
    Foundation ActionScript 3.0 With Flash CS3 And Flex
    Foundation Flash Applications for Mobile Devices
    Flash Mobile Developing Android and iOS Applications
    Flash Game Development by Example
    Actionscript 3.0 迁移指南
    在SWT中非UI线程控制界面
  • 原文地址:https://www.cnblogs.com/zhengleilei/p/8998183.html
Copyright © 2011-2022 走看看