位置: IT常识 - 正文

css添加边框阴影(css添加边框阴影 立体效果)

编辑:rootadmin
css添加边框阴影

推荐整理分享css添加边框阴影(css添加边框阴影 立体效果),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css添加边框阴影效果,css给边框加阴影,css 添加边框,css添加边框阴影怎么弄,css添加边框阴影怎么弄,css给边框加阴影,css添加边框阴影 立体效果,css添加边框阴影 立体效果,内容如对您有帮助,希望把文章链接给更多的朋友!

css边框阴影如何设置?

语法:

<style>box-shadow: h-shadow v-shadow blur spread color inset;</style>

取值:

h-shadow:必需设置的值,定义水平阴影的位置。允许负值。

v-shadow:必需设置的值,定义垂直阴影的位置。允许负值。

blur:可选设置的值,定义模糊距离。

spread:可选设置的值,定义阴影的尺寸。

color :可选设置的值,定义阴影的颜色。如果没有设置值,颜色值基于浏览器显示,建议设置。

inset:可选设置的值,

css添加边框阴影(css添加边框阴影 立体效果)

举例 

X轴与Y轴设为正值(正值 X轴向右 Y轴向下)

<style>box-shadow:4px 4px 15px #f00;</style>

一:文本阴影     1.属性:text-shadow     2.属性值:常用的属性值有4个         - 第一个属性值表示水平方向         - 第二个属性值表示垂直方向         - 第三个属性值表示模糊程度         - 第四个属性值表示颜色

    二:盒子阴影     1.属性:box-shadow     2.属性值:常见的属性值有4个         - 第一个属性值表示水平方向         - 第二个属性值表示垂直方向         - 第三个属性值表示模糊程度         - 第四个属性值表示颜色         - 第五个属性值表示inset 规定盒子阴影在内部显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ text-shadow: 0 0 1px red; } p{ width: 100px; height: 100px; background: skyblue; } p{ box-shadow:0 0 2px #000; } </style></head><body> <div> 文本内容 </div> <p></p></body></html>

 

边框圆角属性的使用     1.属性:border-radius(半径)     2.属性值         - 一个属性值:设置宽高一半/50%~100% 形成圆         - 两个属性值:左上角右下角 右上角左下角         - 三个属性值:左上角 右上角左下角 右下角         - 四个属性值:左上 右上 右下 左下         - 八个属性值:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 300px; height: 300px; background: pink; margin: 200px auto; border-radius: 10px 10px 10px 10px/10px 10px 10px 10px } </style></head><body> <div></div></body></html>

 

背景尺寸大小的设置     1.属性:background-size     2.属性值:         - 第一种:设置固定的宽高大小 100px 200px         - 第二种:100% 100% 表示百分比相对于父级元素计算会沾满父级盒子         - 第三种:100% auto         - 第四种:cover 覆盖(不会让图片变形但是图片超出去的时候会裁剪)         - 第五种:contain 覆盖(表示某一侧碰到父级包含框就会停止变化,不会变形也不会被裁剪) 

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 800px; height: 400px; border: 1px solid #000; margin: 100px auto; background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.7oOC6JBP9YBcN48LmPd1tQAAAA?pid=ImgDet&rs=1); background-repeat: no-repeat; background-size:contain } </style></head><body> <div></div></body></html>

本文链接地址:https://www.jiuchutong.com/zhishi/300708.html 转载请保留说明!

上一篇:卷积神经网络学习—Resnet50(论文精读+pytorch代码复现)(卷积神经网络课程)

下一篇:CryptoJS加密解密(crypto 解密)

  • 安徽增值税发票勾选认证流程
  • 本月计提所得税费用
  • 关税税收优惠记忆口诀
  • 出资款在现金流中怎么体现
  • 转登小规模以前的留抵税额能申请退吗
  • 预提工资与计提工资的区别
  • 管理费0.5%每年
  • 专用发票抵扣联丢失还能抵扣吗
  • 商业银行税前收益率
  • 营改增后如何纳税
  • 出售车辆需要缴纳哪些税
  • 房地产开发企业取得的土地使用权用于建造
  • 研发费用加计扣除最新政策2023
  • 无形资产的出租租金通过什么科目核算
  • 非正常损失怎么处理
  • 公司基本户买理财产品,怎么记账
  • 跟客户合作后发给客户的句子
  • 缴纳的权利许可有哪些
  • 法人变更涉及到什么
  • win10删除了此电脑
  • php面向对象优点,缺点
  • 怎么关闭windows11自动更新
  • 电脑eb是什么意思
  • 租用办公设备
  • 二手车销售发票的开具怎么处理?
  • 关停所有swap分区的命令
  • php列表
  • vue-nginx刷新404问题
  • 基于用户的协同过滤算法
  • 公司搞研发是什么意思
  • 公司发给员工的股票
  • 车辆过完户保险还能下浮吗
  • 境外出差
  • mysql使用指南
  • mongodb 聚合
  • 非广告性质的赞助支出
  • 契税是指什么?
  • 现金等价物的特征是
  • 律师事务所的所属行业是什么
  • 城市基础设施配套费征收管理规定
  • 执行迟延履行利息的计算
  • 固定资产内部抵扣增值税
  • 公司缴纳个人所得税有什么用
  • 小企业核算方式选独立核算
  • 小规模纳税人不超过10万免增值税
  • 员工宿舍的物业费可以抵扣进项税吗
  • 物流托运不给发货
  • 会计做账过程中遇到的问题
  • 会计入门技巧
  • win8系统安装软件在桌面找不到
  • WIN7系统如何设置自动关机
  • win7使用率
  • win10应用商店下载路径更改
  • ubuntu安装ubuntu-desktop
  • fedora7
  • 利用arp指令,能够防止arp欺骗吗?
  • debian安装zsh
  • 在windows的命令提示符下,命令名在实际输入时规定
  • windows10 rs2
  • win7系统玩英雄联盟黑屏怎么办
  • mac安装软件提示无法检查更新
  • xp系统优化的方法
  • win8.1无法进入系统
  • win10开启预览
  • bat 命令大全
  • cocos2djs
  • 全面理解全面把握全面落实
  • 完美解决win11间歇性掉线
  • auto.js粘贴代码
  • ubuntu下安装visual studio
  • vue中怎么引入css
  • jquery怎么写轮播图
  • jquery mobile grid
  • python中文分词库
  • 国税局发票查验平台查询不到
  • 税务执法资格考试
  • 如何查询车辆购置税
  • 买了发票但是税控机里显示没有发票怎么办?
  • 新开公司交印花税
  • 船舶吨税的税收优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设