css:css3(圆角边框、盒子阴影、文字阴影) | 您所在的位置:网站首页 › css怎么给图片加盒子阴影 › css:css3(圆角边框、盒子阴影、文字阴影) |
首页 > > 网页制作 > css >
css:css3(圆角边框、盒子阴影、文字阴影)
2020-06-05 16:01:02来源:博客园 阅读 () ![]() 1、圆角边框 定义圆角边框后,可以将盒子定义为圆角的 (1)长度方式 盒子模型外边距 div{ width: 200px; height: 100px; background-color: yellowgreen; border-radius:3px; }
设置成高度的一半: div{ width: 200px; height: 100px; background-color: yellowgreen; border-radius:50px; }
(2)百分比方式 圆形:长度为正方形的一半: 盒子模型外边距 div{ width: 200px; height: 200px; background-color: yellowgreen; border-radius:50%; }
百分比方式定义盒子: div{ width: 200px; height: 100px; background-color: yellowgreen; border-radius:5%; }
(3)不同的角设置不同的圆角 以左上角为起点,顺时针的方式 div{ width: 200px; height: 200px; background-color: yellowgreen; border-radius:10px 20px 30px 40px; }
(4)选择角去设置: div{ width: 200px; height: 200px; background-color: yellowgreen; border-bottom-right-radius: 16px; }
2、盒子阴影
(1)前两个为必选项,后四个可写可不写 div{ width: 200px; height: 200px; background-color: yellowgreen; border-radius: 16px; box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3); }
(2) 只写前两个属性: div{ width: 200px; height: 200px; background-color: yellowgreen; border-radius: 16px; box-shadow:10px 10px; }
3、文字阴影
原文链接:https://www.cnblogs.com/zhai1997/p/13048360.html如有疑问请与原作者联系 标签:POSTloadClassext方式img 版权申明:本站文章部分自网络,如有侵权,请联系:[email protected] 特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有 上一篇:如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢? 下一篇:字节、腾讯、滴滴前端面试经验分享,裸辞过后,我终于又活过来了 相关文章 DIV居中的经典方法 2020-06-13 CSS中的float和margin的混合使用 2020-06-11 Html/css 列表项 区分列表首尾 2020-06-11 css与javascript重难点,学前端,基础不好一切白费! 2020-06-11 ie8下透明度处理 2020-06-11IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设 网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源 网站联盟: 联盟新闻 联盟介绍 联盟点评 网赚技巧 行业资讯: 搜索引擎 网络游戏 电子商务 广告传媒 网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它 服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护 软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷 网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash 程序设计: Java技术 C/C++ VB delphi 网络知识: 网络协议 网络安全 网络管理 组网方案 Cisco技术 操作系统: Win2000 WinXP Win2003 Mac OS Linux FreeBSD |
CopyRight 2018-2019 实验室设备网 版权所有 |