CSS3 的各种用法及参数含义

admin管理员组

文章数量:1794759

CSS3 的各种用法及参数含义

目录

1、边框(补习) border：

 2、CSS3 圆角 border-radius：

 3、盒子阴影 box-shadow ：

 4、CSS3 边界图片 border-image ：

---

菜鸟教程CSS3

<div class="box"></div>  // 下方样式全部基于  .box   实现

1、边框(补习) border：  .box {   // 样式     width: 100px;     height: 100px; // 1px: 边框宽度； // solid: 边框线条的形状 可选值(solid实线、dotted圆虚线、dashed长虚线) // #343434: 颜色(支持十六进制、英文等等)     border: 1px solid #343434; }

结果：

                     

 2、CSS3 圆角 border-radius： .box { width: 100px; height: 100px; // 这里改变 solid 值为虚线时，你将得到一个虚线的圆 border: 2px solid #343434; // 值可为百分比、px等单位，50%直接是圆 border-radius: 50%; }

 结果：

 3、盒子阴影 box-shadow ： .box { width: 100px; height: 100px; border: 2px solid #343434; border-radius: 50%; // 第一个值：向右移动； // 二： 向下移动； // 三： 模糊程度； // 四： 阴影颜色 // 前两个个值均可写为负数如：box-shadow: -10px -10px 5px #888888; box-shadow: 10px 10px 5px #888888; }

结果：

                               

 4、CSS3 边界图片 border-image ：

注意: Internet Explorer 不支持 border-image 属性。

CSS3 border-image 属性 | 菜鸟教程

 持续更新中。。。

本文标签： 含义参数