CSS3边框图片、边框阴影、文本阴影
来源:互联网 发布:java如何实现伪静态 编辑:程序博客网 时间:2024/05/16 07:17
边框图片border-image
其有五个属性:
border-image-source:边框图片的路径border-image-slice:图片边框向内偏移
border-image-width:图片边框的宽度border-image-outer:边框图片区域超出边框的量border-image-repeat:图片边框的平铺状态,有三个参数平铺repeat、铺满round、拉伸stretched
复合写法:border-image:url slice width outer repeat;
用到的图片:
效果图:
1、repeat
2、round
3、stretch
边框阴影box-shadow
其有六个属性:前两个是必需的,后四个可选
h-shadow:水平阴影的位置,允许负值v-shadow:垂直阴影的位置,允许负值blur:模糊距离spread:阴影的尺寸color:阴影的颜色insert:将外部阴影改为内部阴影
复合写法:box-shadow:h-shadow v-shadow blur spread color insert;
注意:可以同时给多个,用逗号隔开即可
例如:box-shadow:50px 50px 30px 50px yellow,10px 10px 30px 10px skyblue inset;
效果图如下:
文字阴影text-shadow
其有四个属性:前两个必需,后两个可选
h-shadow:水平阴影的位置,允许负值v-shadow:垂直阴影的距离,允许负值blur:模糊距离color:阴影的颜色
复合写法:text-shadow:h-shadow v-shadow blur color;
例如:text-shadow: 2px 2px 50px purple,2px 2px 3px pink,10px 20px 30px skyblue;
效果图如下:
阅读全文
0 0
- CSS3边框图片、边框阴影、文本阴影
- css3文字渐变和阴影、图片边框和边框阴影
- css3边框阴影效果
- css3边框 圆角 阴影
- CSS3 边框阴影
- css3边框外部阴影
- CSS3边框阴影
- CSS3选择器、边框、阴影
- css3实现的图片边框阴影特效
- CSS3圆角、盒阴影与边框图片
- CSS3 (边框 圆角 阴影)
- css3 边框阴影 box-shadow
- CSS3边框 圆角 阴影,旋转
- 边框、阴影
- 边框阴影
- 边框阴影
- CSS3边框阴影,折角效果演示
- css3设置边框阴影的属性
- 714. Best Time to Buy and Sell Stock with Transaction Fee
- 【一起来学C语言】C语言的组成:顺序结构
- sweatAlert2优秀的前端提示框框架使用记录
- java仿写HashMap
- poj1159——palindrome
- CSS3边框图片、边框阴影、文本阴影
- zufeoj 2237 炒菜
- MTK平台的术语缩写
- SpringMVC中的拦截器
- docker下终端无法输入中文问题
- 2017.10.29 软件安装 思考记录
- 系统目录结构及文件类型
- 87版《红楼梦》尤二姐 如今身份惊人:高级软件工程师
- 547. Friend Circles