• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius

HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,css3,属性等相关知识,匿名希望在学习及工作中可以帮助到您
今天我们的内容是css3的text-shadow、box-shadow 和 border-radius几个属性的介绍,他能增强页面布局,值得学习。

  RGBA

  前三个值分别代码RBG的值,最后一个值代表透明度(0表示透明,1表示不透明)。

  RGBA可以用于任何和color有关的属性,例如字体颜色、边框颜色、背景颜色和阴影颜色等。

  文字阴影

  文字阴影的结构按照这样的顺序:x-offset, y-offset, blur, 和 color。

  为x-offset设置负值会将阴影位置改变到左边,为y-offset设置负值会将阴影位置改变到头部。我们也可以使用RBGA设置阴影的颜色。

  你可以设置一组text-shadow,中间以逗号相隔。下面的例子使用两个text-shadow(顶部1px 和 底部1px),为名字设置了新闻文字效果。

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

  边框半径

  边框半径对属性赋值的便捷写法类似于padding和margin(例如:border-radius: 20px)。为了让有些浏览器能正确渲染效果,需要在属性前面加前缀,例如针对webkit浏览器需要添加 "-webkit-" 前缀,firefox浏览器需要添加 "-moz-" 前缀。

  你可以为不同的边角设置不同的半径,注意webkit和firefox浏览器,每个边角有不同的属性名称。

  盒子阴影

  盒子阴影的结构和text-shadow 属性一样,按照这样的顺序: x-offset, y-offset, blur, 和 color。

  你可以为盒子阴影设置很多效果,例如下面的例子使用一组参数来设置效果(参数之间以逗号相隔)。


-moz-box-shadow: 
-2px -2px 0 #fff, 
2px 2px 0 #bb9595, 
2px 4px 15px rgba(0, 0, 0, .3);

以上就是HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5Web 存储实例详解
  • 2018-12-03HTML5 Canvas中绘制矩形实例教程
  • 2018-12-03HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述_html5教程技巧
  • 2018-12-03web前端菜鸟,好迷茫?
  • 2018-12-03H5在Canvas中实现自定义路径动画
  • 2018-12-03html5教程制作简单画板代码分享_html5教程技巧
  • 2018-12-03HTML5标准最新技术预览
  • 2018-12-03如何使用HTML5的picture元素处理响应式图片
  • 2018-12-03[HTML5教程]-HTML 5 视频
  • 2018-12-03做为一名在校学生而言,从其职业发展的角度出发,在学习 Web 前端开发的时候有必要花时间兼容 IE6、IE7 这些浏览器吗?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html5新标签datalist实现输入框与后台数据库数据的动态匹配的详细介绍
    • 如何让IE9以下版本(ie6/7/8)认识html5元素
    • 易企秀、兔展类似的在微信上传播的H5微场景制作软件还有哪些?
    • 使用HTML5在网页中嵌入音频和视频播放的基本方法_html5教程技巧
    • 基于HTML5的齿轮动画特效_html5教程技巧
    • H5制作虚拟键盘时出现输入框遮挡的情况怎么办?
    • HTML5 canvas基本绘图之文字渲染
    • HTML5中对accesskey属性的解释与规定
    • Html5拖放的实现方法
    • 配置H5的滚动条样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有