[HTML]Web前端开发技术21（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，border-radius，box-shadow，transform——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

CSS3 边框

1.border-radius圆角边框

2．box-shadow 边框阴影

3．border-image 边框图像

CSS3 转换transform 属性

1．CSS3 2D 转换

总结

---

前言

来来来，上号~

---

CSS3 边框

 CSS3具有3个边框属性

1.border-radius圆角边框

1.border-radius圆角边框

   语法：border-radius: 水平半径(1-4个值)px|%/垂直半径(1-4个值)px|%;

             border-radius:2em;                /* 等同于下列4行定义  */ 

             border-top-left-radius:2em;          /* 定义左上角半径  */ 

    border-top-right-radius:2em;        /*定义右上角半径*/ 

    border-bottom-right-radius:2em;    /*定义右上角半径  */ 

    border-bottom-left-radius:2em;      /*定义左下角半径  */ 

举个例子

			
CSS3圆角边框


半径均相同


左、右对角的半径相同


每个角水平与垂直半径不同
	

---

2．box-shadow 边框阴影

box-shadow 边框阴影是复合属性，含有六个属性。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

            box-shadow: 0 0 30px 20px #6699ff inset;    /*内部阴影 */

            box-shadow: 0px 0px 45px 10px #9999ff;     /*外部阴影 */

            box-shadow: 20px 20px 35px 15px #99ff33; /* 外部阴影 */

举个例子

CSS3圆角边框、阴影

半径均相同,内部阴影
左、右对角的半径相同，外部阴影
每个角水平与垂直半径不同，带水平、垂直偏移的外部阴影

---

3．border-image 边框图像

border-image 属性创建带有图像的边框，三个参数分别是图像、剪裁位置、重复性。该属性有五个子属性。语法如下：

    border-image:border-image-source

    border-image-slice/border-image-width/ border-image-outset border-image-repeat；

    border-image: url(“border.png”) 27 27 27 27 fill/27 27 27 27/27px 27px 27px 27px repeat；/* 剪裁和宽度不需要单位，偏移量需要单位。fill表示可选项，指定中间第九块为非透明块。*/

border-image-source 属性（边框图像）。

       默认无边框图像，如果设置边框图像，则使用绝对或相对url 地址指定边框图像。

       border-image-source: none |url(image文件);

       border-image-source:url("border.png");

border-image-slice 属性（图像切片 / 剪裁）。

       该属性规定图像边框向内偏移，可以是数字或百分比。可以1～4 个值，类似于padding属性的设置方法。语法如下：

border-image-slice: number |% |fill;

border-image-slice:27 27 27 27; /* 边框图像切9块，每个角为27px*27px*/

border-image-repeat 属性（边框图像重复）。

该属性用于设置边框图像的重复方式。语法如下：

border-image-repeat: stretch | round | repeat

      该属性值有三种取值，分别为stretch（拉伸）、round（环绕）、repeat（复制）。默认值为stretch。stretch 表示拉伸图像来填充区域；repeat 表示直接用图像来填充区域，填充时图像可能有残缺；round 与repeat 效果类似，如果无法完整平铺所有图像，则对图像进行缩放以适应区域。

border-image-width 属性（边框图像宽度）。

     border-image-width：number |% ;   /* 可以有1～4个值*/

     border-image-width:27px 1 10% 27px; 

     /* 边框图像宽度设置为top:27px,right:1倍，bottom:10%,left:27px */

border-image-outset 属性（图像外凸）

   border-image-outset: length | number | percentage | auto; /* 1～4个值 */

     例如，设置div 的类样式如下，边框图像不向外凸出。

.box{width: 200px; height: 50px;

       border: 54px solid red;   /* 边框宽度54px */

       border-image: url("border.png") 27/27px round;/*边框图像高度与宽度均为27px */

       /*边框图像向外凸出10px*/

border-image: url(“border.png”) 27/15px/10px round; /*指定边框背景图像宽度为15px、偏移量为10px */

}

举个例子

CSS3图像边框的应用

stretch
 round
repeat

这是原图

---

CSS3 转换transform 属性

1．CSS3 2D 转换

 CSS3 2D 转换常用方法有translate()、rotate()、scale()、skew()、matrix()。

位移 translate( x,y )

       translate(x,y)方法的作用是将元素从当前位置根据给定的x 轴坐标和y 轴坐标进行移动。x 表示left，父元素的左边界；y 表示top，父元素的上边界。translate()方法还提供根据单一轴移动的方法，分别是translateX()和translateY()。

transform:translate(50px,50px); /* 向右移动50px，向下移动50px */
    transform:translate(50px,0); /* 向右移动50px */
    transform:translateX(50px); /* 向右移动50px */
    transform:translate(0,50px); /* 向下移动50px */
    transform:translateY(50px); /* 向下移动50px */

旋转 rotate(deg) 。

      可以对元素旋转给定的角度，正值为顺时针，负值为逆时针。

     transform:rotate(deg);          /* 基本语法 */

     transform:rotate(10deg);      /* 旋转10° */

     transform:rotate(120deg);    /* 旋转120° */

举个例子

	
div{width:180px;height:50px;background:#dadada;border:1px solid #00cc66;	}
#div1{transform:translate(50px,50px);}   /* 位移  */
#div2{transform:rotate(30deg);}   /* 旋转  */
#div3{transform:rotate(120deg);}   /* 旋转  */
td{text-align:left;vertical-align:top;}


				
CSS3 2D转换-位移与旋转




这是原div
这个div向右移动50px，向下移动50px


这是原div

这个div旋转30度

 

这是原div
这个div旋转120度

---

总结

这样更有针对性，更好实践，喵~

---

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！