技术文章 | Technical articles

html5源码笔记——前端开发培训机构

一、 背景相关属性

Background-color

Background-image

Background-repeat

Background-position

Backgroound-attachment

 

Background-size

Background 可以同时添加多张背景图片,如果有颜色,颜色搁在最后一个背景图片的前面

 

Background-origin   背景起源,背景原点位置

Backgroufn-clip     裁剪,裁剪某个位置

属性值: border-box     content-box    padding-box


        #box{

            height: 400px;

            width: 400px;

            border: solid 1px;

            /* vertical-align: -100px;; */

/*

            background-color: yellow;

            background-image: url(./img/1.jpg); */

            /* background-image: url(./img/9.jpg); */

            /* background-repeat: no-repeat;

            background-size: 100px;

            background-position: center; */

 

            background:url(./img/1.jpg) right top no-repeat,

                      rgba(0,0,0,.5) url(./img/9.jpg) 0 100% no-repeat;

            background-size: 100px,50px;

        }

 

        #box2{

            height: 200px;

            width: 200px;

            padding: 50px;

            border:solid 50px red;

            /* vertical-align: 100px; */

 

            background:url(./img/1.jpg) no-repeat 50% 50%/100% 100%;

            /* background-origin: content-box;  设置背景原点从内容开始*/

             background-origin: padding-box;  /*默认,含padding */

            /*  background-origin: border-box; 设置背景原点从边框开始 */

 

            /* background-clip: border-box; */

            /* background-clip: padding-box; */

            background-clip: content-box;

        }

 

二、 阴影

2.1 盒子阴影

Box-shadow:水平方向阴影  垂直方向阴影   模糊距离  阴影大小  阴影颜色  阴影位置;

    <style>

        .sun{

            height: 100px;

            width: 100px;

            border-radius: 50%;

            background: red;

            box-shadow: 0 0 6px 8px orange,

                0 0 10px 12px yellow;

 

            position: fixed;

            top: 50px;

            left: 100px;

        }

 

        .cloud{

            width: 80px;

            height: 80px;

 

            background: white;

            border-radius: 50%;

            box-shadow:40px -30px 0px 4px white, 96px 2px 0px 8px white, -29px -14px 0px 4px white;

 

            position: fixed;

            top: 250px;

            left:400px;

        }

    </style>

</head>

<body bgcolor="#e7e7e7">

    <div class="sun"></div>

    <div class="cloud"></div>

</body>

 

2.2 文本阴影

Text-shadow: 水平方向阴影  垂直方向阴影   模糊距离  阴影颜色;

  p{

            text-shadow: 2px 2px 2px black;

        }

 

三、渐变色(属性值)

2.1 线性渐变  linear-gradient()

需要给多个颜色值,默认从上往下渐变,可以设置渐变的方向:

两种方式:

Left  从哪边开始

To right 向哪边渐变

注意:CSS3属性需要做浏览器兼容

-webkit-    谷歌或者苹果

-ms-       IE

-moz-      火狐

-o-        欧朋

        div.box1{

           height: 200px;

           width: 100%;

 

           background-image: -webkit-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Safari 5.1 to 6.0 */

           background-image: -moz-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Firefox 3.6 to 15 */

           background-image: -o-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Opera 11.1 to 12.0 */

           background-image: linear-gradient(to right bottom,red,orange,green,lightgreen,blue);/*标准语法*/

        }

 

        div.box2{

            height: 400px;

            width: 400px;

            margin-left: 200px;

            border: solid 1px;

            background-image: linear-gradient(to left bottom,blue 20%,red 40%,yellow,green,gray,pink,purple);

        }

 

2.2 径向渐变 radial-gradient()

确定圆的类型

ellipse (默认): 指定椭圆形的径向渐变。

circle :指定圆形的径向渐变

定义渐变的位置。可能值:

center(默认):设置中间为径向渐变圆心的纵坐标值。

top:设置顶部为径向渐变圆心的纵坐标值。

bottom:设置底部为径向渐变圆心的纵坐标值。

 

    div.box3{

            width: 600px;

            /* background-image: radial-gradient(circle,red,blue,green,orange,yellow,pink,purple); */

            background-image: radial-gradient(circle at top,red 5%,blue 10%,green 15%,orange 20%,yellow 30%,pink 50%,purple 80%);

        }

三、 变形transform

值函数:

Translate(x,y)  偏移,两个参数分别为x方向和y方向偏移;如果只有一个值,就是代表向x偏移

translateX(x)

translateY(y)

            background: red;

            /* margin-top: 100px; */

            /* position: relative;*/

            /* position: fixed; */

            /* position: absolute;

            top: 100px;  */

 

            /* 向下偏移100px */

            /* transform: translateY(100px); */

            /*  向右偏移200px*/

            /* transform: translateX(200px); */

            /* 同时设置向下偏移100px向右偏移200px */

            /* transform: translate(200px,100px) */

 

            transform: translate(100px);

 

Scale(x,y) 缩放,两个参数分别为x方向和y方向缩放值;如果只有一个值,代表元素两个方向的缩放值

ScaleX(x)

scaleY(y)

/* width: 1px; */

            display: inline-block;

            margin-left: 400px;

            background: pink;

            /* x方向缩小一半 */

            /* transform: scaleX(0.5); */

            /* y方向变大一半 */

            /* transform: scaleY(2); */

 

            /* 设置xy方向的缩放值 */

            /* transform: scale(0.9,0.5); */

 

            transform: scale(0.5);

 

 

倾斜 skew(x deg);

skewX()

skewY()

            display: inline-block;

            height: 400px;

            margin-left: 200px;

            background: orange;

 

            /* x方向倾斜30deg */

            /* transform: skewX(30deg); */

 

            /* y方向倾斜30deg */

            /* transform: skewY(60deg); */

 

            transform: skewX(30deg);

 

 

旋转rotate(z deg) 平面旋转

RotateX()  x轴旋转

rotateY()  y轴旋转

rotateZ()  z旋转,平面旋转

       display: inline-block;

            height: 400px;

            margin-left: 200px;

            background: green;

 

            /* x轴旋转30deg */

            /* transform: rotateX(30deg); */

            /* y轴旋转30deg */

            /* transform: rotateY(60deg); */

 

            transform: rotateZ(60deg)



关注微信公众号“icketang”,获取最新前端资讯,学习资料

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: html5源码笔记——前端培训机构
下一篇文章: html5源码笔记(三)——前端培训机构
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>