边框图片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;

效果图如下:

CSS3边框图片、边框阴影、文本阴影相关推荐

  1. 给图片加图片边框 图片边框要求为PNG格式

    2019独角兽企业重金招聘Python工程师标准>>> package com.product.utils;import javax.imageio.ImageIO;import j ...

  2. html盒子阴影效果,CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)

    添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示. CSS3定义了两种 ...

  3. css如何给盒子底部加阴影,CSS3 --添加阴影(盒子阴影、文本阴影的使用)

    CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...

  4. border-image 边框图片

    目录 border-image-source  边框图片地址 border-image-slice  图像分割位置 border-image-width  边框图片的宽度 border-image-r ...

  5. html边框背景图片,css3 边框、背景、文本效果的实现代码

    一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...

  6. css圆角框四周阴影,css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  7. 自定义字体样式引入使用方法、文本阴影、边框阴影、(边框)圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别

    目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法 引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡  transition 7.理论知识 ...

  8. html 画圆的阴影,CSS3(1)---圆角边框、边框阴影

    圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了C ...

  9. CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影

    本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

最新文章

  1. 超全的3D视觉数据集汇总
  2. 《为什么我们的决策总出错》摘录
  3. Android安全加密:消息摘要Message Digest
  4. 对民营医院的网络推广--迅脉互联
  5. linux私有组信息存放在哪,【Linux】Linux私有组,主要组和附加组
  6. W25Q128 闪存芯片SPI详解
  7. 创业者都有一个共同的特质,他想做事,就立刻做
  8. 计算机毕业设计中用Java编写一个订餐系统(JAVA SWING)
  9. keras实现DeepDream
  10. python免费全套教程-python入门免费教程看这些就够了
  11. mysql触发器编程_mysql之触发器trigger详解
  12. 一周信创舆情观察(11.16~11.22)
  13. 读文件java_java怎么读取文件?
  14. pytorch RuntimeError: size mismatch, m1: [16 x 86016], m2: [25088 x 512] at /opt/conda/conda-bld/pyt
  15. Educational Codeforces Round 91 (Rated for Div. 2) D.Berserk And Fireball(思维,暴力破解,分情况)
  16. Nginx代理高德API(无法地图选点)
  17. jpress连接数据库mysql_通过Tomcat jpress连接不到数据库
  18. 变年轻特效怎么制作?这三个方法你值得收藏
  19. NPDCCH发送周期解析
  20. 小福利,用selenium模块爬取qq音乐歌单!

热门文章

  1. Android基础学习第二篇—Activity
  2. Permutations II
  3. 编译JDK源代码【转】
  4. 【转】解决XMLHTTP获取网页中文乱码问题
  5. poj 1068 Parencodings (模拟)
  6. 算法面试题:找出由两个有序列表合并而成的新列表中的第n个元素
  7. 掌握jsp自定义标签:(四)
  8. leetcode 315 python
  9. linux crontab 怎么用,Linux crontab 如何使用
  10. RTT线程管理篇——rtt线程恢复