标签：repeat 盒子 17 transform 12 2020 background border 属性

盒子隐藏

样式：
display：none；

背景系列

background属性。
background-color 设置元素的背景颜色。
background-img 将图片设置为元素的背景。

background-color
颜色的表示方法：
    1.单词
        red blue 
    2.rgb
        red green blue 三原色  饱和度 0-255 

    3.16进制
        0-9 a-f #ff0000
    20=
    f=15
    255=15*15=ff
    对于10进制来说  100=10*10
    对于16进制来说 255=15*15=f*f ff

    10=1*16=16
    12=1*16+2=18
    28=2*16+8=40

    16进制的af等于10进制的多少？
    10*16+ 15=175

    所有的十六进制的颜色都是以#开头的。

    所有的#aabbcc的形式，都可以简写为#abc。
    
    常用的颜色：
        #000 黑色
        #fff 白色
        #f00 红色
        #222 深灰
        #333 灰色
        #ccc 灰色

背景图

    将图片设置为背景。
    background-image: url("图片的路径");
    背景图片会铺满盒子的整个背景区域。
    background-repeat:
        repeat(平铺 默认值)
        no-repeat 不平铺
        repeat-x 横向平铺
        repeat-y 纵向平铺
        background-img
设置图片为背景。

background-size:设置背景图片的大小
属性值：px 单词
单词：
    都会让图片等比例缩放。
    cover 将盒子铺满背景图，但是不保证图片的完整显示。
    contain  将图片完整的显示，不保证铺满盒子。

background-repeat 设置背景图片是否重复以及如何重复，默认为平铺满。
属性值：
    repeat:平铺 默认值
    no-repeat:不平铺
    repeat-x 水平上平铺
    repeat-y 垂直上平铺

background-position
规定插入的背景图在盒子中的位置。
默认从左上角开始显示背景图。

     1.像素
      background-position: 水平偏移量（正向右） 垂直偏移量（正向下）;
     2.百分比
        图片在左上角是 0% 0%
        图片在右下角是100% 100%
        代表的像素值：（盒子的宽/高-图片本身的宽/高）*百分比
        也可以为负数。
     3.单词
        top
        bottom
        center
        left 
        right
    如果只有一个值，默认另外一个值为50%

    应用场景：
    1.网页的背景图
    2.通栏banner
    3.精灵图/雪碧图（音译）
        提高网页的响应速度，减少服务器的压力。

    使用技巧：
        1.在h1中使用背景图，再将文字首行缩进溢出隐藏，有利于网站的SEO优化。

background-attachment;

   设置图片是否随着页面的滚动而滚动
   属性值：
     fixed：背景会被固定，不会随滚动条滚动
     scroll 默认属性，会随滚动条滚动。

精灵图：综合写法

 color image repeat attachment position
    background:red url("img/bs.jpg") no-repeat fixed 100px 200px;

background-origin 背景原点

padding-box 从内边距开始显示背景 默认值
border-box 从边框开始显示背景
content-box 从内容开始显示背景

background-clip 背景裁切

border-box 默认值 超过边框部分的背景，将被裁剪掉。
padding-box 超过padding部分的背景，将被裁剪掉。
content-box 超过内容部分的背景，将被裁剪掉。

text-shadow 文本阴影。

     格式：
        text-shadow: 水平偏移量 垂直偏移量 模糊度 阴影颜色;

盒子：

        边框圆角
            border-radis
                属性值：px 百分比
                border-radis：水平半径 垂直半径
            border-radis:10px;
            以10px为半径，画圆，以得到的弧度为边角。

        可以按照四个角来设置：
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;

            border-radius: 左上 右上 右下 左下;
            省略的角度，取对角的值。
    半圆：
    1.矩形
    2.宽是高的2倍。
    3.左上右上圆的半径为宽的一半
        半径写法：
            border-radius: 150px/200px; 水平半径/垂直半径

盒子阴影
box-shadow
格式： box-shadow:水平偏移 垂直偏移 模糊度 阴影大小 阴影颜色 内阴影/外阴影

线性渐变：

    格式：
        background-img:liner-gradient(方向,起始颜色...终止颜色);  
    
    方向：to left,to right,to top,to bottom       
    角度 deg

百分比写法

     background-image: linear-gradient(45deg,yellow 0%,green 40%,cyan 70%,#ff6700 100%);

径向渐变
background-img：radial-gradient(辐射的半径大小 中心的位置，起始颜色，…终止颜色);

中心的位置：
    单词
        at center
        at left
        at top
        at right
        at bottom
    px
        按照左上角进行位移

w3c

会员：各大互联网巨头 
它设定了整个平台的规则，监督整个过程。

现在学习的是css2.1 但是到css3时，就要考虑兼容性问题。

浏览器前缀 

谷歌 苹果 -webkit- 
火狐   -moz-
IE     -ms-
欧朋   -o-
sass

过渡

transtion 过渡

之前：元素从一个状态到另一个状态（hover）直接切换，从开始状态到结束状态瞬间完成，中间过程几乎不可见。
css3新增了过渡这个属性，可以实现元素不同状态的平滑过渡。
transition-porperty：制定过渡的属性。all为指定所有属性都有过渡效果，必须。
transition-duration：制定过渡的时间单位可以说s或者ms，必须
transition-delay：制定过渡生效的延迟时间。
 transition-timing-function: 
        ease 慢慢减速
        linear 匀速
        ease-in 加速
        ease-out 减速
        ease-in-out 先加速后减速
过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;
    一般有数值/中间状态的属性才可以设置过渡，比如：width，height    

缩放，位移，旋转，倾斜

    transform 属性
    缩放：
        放大缩小。
    格式
    transform：scale(x,y);
    x:代表水平方向的缩放倍数
    y：代表垂直方向的缩放倍数。
    如果只写一个值，代表等比例缩放。
    不会改变真实宽高，也不会旁边的盒子造成影响
    位移 translate
    格式：
        tramsform：translate（水平位移，垂直位移）
    属性值：
    px 正值：向右或向下。
    百分比 是按照盒子本身的宽高。

    只写一个值时，是水平位移
    转：rotate
格式： transform：rotate（角度）
单位：deg

transform-origin: 变换原点

格式： transform-origin: 水平坐标 垂直坐标
px 
百分比 按照盒子的宽高。50%=center
单词 left center等

transform 后面可以书写多个转换，但是书写顺序不同，效果不同。
对于
transform: translate(100px) rotate(90deg);
transform:rotate(90deg) translate(100px) ;
第一种会先位移，再旋转
第二种会先旋转，再位移。
倾斜 skew

格式：transform：skew（水平倾斜角度，垂直倾斜角度）
单位是deg，正值 顺时针，负值逆时针。

所有的转换属性，只能添加给块级元素，行内元素无效。

3D旋转：

    transform: rotate3D(x,y,z,deg); 
    x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
    rorateX，X轴旋转
    rorateY，Y轴旋转
    rorateZ Z轴旋转
旋转的方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。

位移：

    transform: translateX(); //沿着x轴移动
    transform: translateY();//沿着Y轴移动
    transform: translateZ();//沿着Z轴移动
    transform: translate3d(x,y,z);

    perspective 透视：
    
    translateZ为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
    translateZ为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
    translateZ为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。
      设置给变换盒子的父容器。
        透视：
        设置用户眼睛与屏幕的距离。
        透视效果只是视觉上的呈现，不是真正的距离

标签：repeat,盒子,17,transform,12,2020,background,border,属性
来源： https://blog.csdn.net/dianovo7/article/details/111313358

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。