zoukankan      html  css  js  c++  java
  • 关于css3

    1.选择器:

    属性选择器:[];

    查找条件:属性;我们可以通过属性来查找[^=][$=][*=][=][attr]

    伪类选择器:  ::;

    ::before;::after;

    必须指定一个content:新添加的元素是一个行内元素。

    尽量使用单冒号:before   :after

    2.文字阴影:text-shadow:2px 2px 5px 5px red;

    3.边框:

    边框圆角:border-radious:10px 10px 10px 10px;

    border-radius:10px;
    border-radius:10px 20px:对角线
    border-radius:10px 20px 30px;
    边框阴影:box-shadow:2px 2px 5px blue;
    box-shadow:insert 2px 2px 5px blue;内阴影;
    边框图片:border-image-source:url();
    border-image-slice:22 22 22 22;
    border-image-repeat:round stretch repeat;
    border-image-width:30px;
    4:盒模型
    padding+content+border;
    css3改变了这种计算方法:
    width css设置的宽度:
    当设置box-sizing:border-box;
    width=盒子的大小:变小的是content区域。

     计算方式为content = width – border - padding

    当设置box-sizing:content-box;
    width=content;
    5.渐变色:
    。1.方向;。2至少有两个颜色;。3.一定的距离;
    linear-gradient(to right,yellow,green);
    90deg是角度;
    background:linear-gradient(
    90deg,
    yellow 25%,
    green 25%,
    green 50%,
    pink 50%,
    pink 75%,
    blue 75%,
    blue 100%);
    其中的百分比是分割距离;
    没有距离无法过度;
    将渐变当成图片来对待;
       设置背景图片大小:
    当指定了背景图片尺寸时,百分比是相对于background-size;

     线性渐变

      径向渐变

      radial-gradient(120px at center center,yellow,green);圆

      radial-gradient(120px 80px at center center,yellow,green);椭圆

      center center可用百分比,数值显示;

    清除塌陷:给父元素设置overflow:hidden或者设置边框;
    ::before     ::after
    一个创建一个div 一个在前面和后面  这个前面和后面不是固定的  可以通过定位 随便定位置  。

    过渡效果:transition:all 1s;

    缩放:transform:scale(0.5);

    移动:transform:translate(100px,100px);

    旋转:transform:rotate(角度);

    倾斜:transform:skew(10deg垂直,10deg水平);

    动画:

    animation:rotate 2s infinite linear;

    1、必要元素:

    a、通过@keyframes指定动画序列;

    b、通过百分比将动画序列分割成多个节点;

    c、在各节点中分别定义各属性

    d、通过animation将动画应用于相应元素;

    2、关键属性

    aanimation-name设置动画序列名称

    banimation-duration动画持续时间

    canimation-delay动画延时时间

    danimation-timing-function动画执行速度,linearease

    eanimation-play-state动画播放状态,playpaused

    fanimation-direction动画逆播,alternate

    ganimation-fill-mode动画执行完毕后状态,forwardsbackwards

    hanimation-iteration-count动画执行次数,inifinate

    首先定义一个动画序列:
    @keyframes  rotate{
            0%   {
    transform:rotateZ(0deg);
    }
           100%{
     transform:rotateZ(360deg);
    }
    伸缩布局:
    display:flex(伸缩布局);
    两端对齐:
    justify-content(主轴方向对齐):space-between;
    利用了伸缩布局;
     
    主轴:默认水平
    侧轴:默认垂直
    方向:主轴:从左到右;侧轴:从上到下;
     
      flex-direction:row(水平),column(垂直),row-reverse(水平翻转从右向左),column-reverse(垂直翻转从上到下);
    justify-content:flex-start:起点对齐
       flex-end:终点对齐;
       center:居中对齐
       stretch:拉伸对齐
       space-around:环绕对齐;
       space-between:两端对齐;
    flex-wrap:nowrap/wrap控制是否换行;
    align-content:堆栈排列;    
  • 相关阅读:
    域名和IP地址的关系通俗解释
    简单卷、跨区卷、带区卷、镜像卷和 RAID5的区别
    什么是网络端口
    Windows7 64 bit 下解决:检索 COM 类工厂中 CLSID 为 {0002450000000000C000000000000046} 的组件时失败
    SQL函数,收藏先。
    C#中抽象类和接口的区别(转)
    SQL数据库碎片检查DBCC SHOWCONTIG含义
    SQL锁表语句
    50种方法优化SQL Server
    简单工厂模式(转)
  • 原文地址:https://www.cnblogs.com/lijingsi9210/p/6006031.html
Copyright © 2011-2022 走看看