css3中的常用属性介绍

rgba

background:rgba(0, 118, 160, .25);

前三个值是RGB颜色值,最后一个值是水平的透明度(0 =透明,1 =不透明)。

RBGA可应用于任何与颜色相关的属性如字体颜色,边框颜色,背景颜色,阴影的颜色,等

 

文本阴影 text-shadow(不需要判断浏览器)

立即学习“前端免费学习笔记(深入)”;

text-shadow:2px 3px 2px #000;

文字阴影的结构是按照以下顺序:X -偏移,Y -偏移,模糊,和颜色;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

设置为负值,X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用rgba值。

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

文字阴影的列表(以逗号分隔),1px的顶部和底部1px的阴影。

  

盒阴影 box-shadow(需要判断浏览器)

盒阴影的结构和文字阴影的一样:分别标示:X -偏移,Y偏移,模糊和颜色 。

-webkit-box-shadow:5px 5px 7px #333;-moz-box-shadow:5px 5px 7ix #333;

 

同样,可以定义多个阴影样式,用逗号隔开。

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

 

box-shadow属性至多有6个参数设置:

阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影;

X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;

Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;

阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小

阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

  

盒子边界半径 border-radius(需要判断浏览器)

边界半径的简写,是类似的Padding和Margin属性(如边界半径: 20像素 )。

在浏览器的顺序来渲染边界半径,在WebKit浏览器用“-WebKit-”,火狐用“-moz-”。

border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;

 

您可以指定一个不同的值的每个角。注意Firefox和Webkit的角有不同的属性名称。

“Webkit的”写法

-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:15px;-webkit-border-bottom-left-radius:25px;-webkit-border-right-left-radius:45px;

“火狐”的写法

-moz-border-radius-topleft:5px;-moz-border-radius-topright:15px;-moz-border-radius-bottomleft:25px;-moz-border-radius-bottomright:45px;

以上就是css3中的常用属性介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608464.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:51:45
下一篇 2025年12月23日 21:52:22

相关推荐

  • 使用css3实现简单的响应式布局(代码)

    本文简单的讲解了如何使用css3实现简单的响应式布局: css3文件: *{ margin:0px; padding: 0px;}.heading,.container,.footing{ margin: 10px auto;}.heading{ height: 100px; background-…

    2025年12月23日
    000
  • 纯CSS3画出小黄人并实现动画效果

    前言前两天我刚发布了一篇css3实现小黄人动画的博客,但是实现的css3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用ps抠出需要实现动画的部分,最后才完成的动画效果。但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看…

    2025年12月23日 好文分享
    000
  • 介绍css3过渡和动画有哪些区别

    background-color: rgb(252, 252, 252);”>CSS3 过渡 css3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用flash动画或javascript。用鼠标移过下面的元素: 也就是说我们设置好元素过渡后,突然间改变元素的属性,…

    好文分享 2025年12月23日
    000
  • 使用css3截断文本并加省略号

    代码展示: overflow : hidden;/*text-overflow: ellipsis; 有些示例里需要定义该属性,实际可省略*/display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 概述 -we…

    好文分享 2025年12月23日
    000
  • 教你怎么使用css3实现隔行换色

    css3如何实现隔行换色呢?使用css3选择器 p:nth-of-type(odd)奇数 和 p:nth-of-type(even)偶数 以下是部分实例: p:nth-of-type(odd){background:#ff0000;}p:nth-of-type(even){background:#0…

    2025年12月23日 好文分享
    000
  • 介绍css3中REM的使用方法

    在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web…

    好文分享 2025年12月23日
    000
  • 基于CSS3鼠标滑过放大突出效果详解及实例

    还记得之前分享过一款css3图片悬停放大特效,效果非常不错。今天我们要再来分享一款类似的css鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其css原理,任何网页元素都可以实现这种突出放大的css3动画特效。效果图如下: 实现的代码。 html代码: @@##@@ @@##@@ …

    2025年12月23日
    000
  • 使用CSS3各个属性实现小人的动画实例代码

    使用css3各个属性实现带有音乐小人的动画,完全不使用js代码: 注:chrome浏览器效果最佳,最终效果静态图:   HTML代码如下: 立即学习“前端免费学习笔记(深入)”; 练习一个小人的动画 I ♥ Y O U ♫ ♪ CSS代码如下: /* CSS Document…

    2025年12月23日
    000
  • 关于CSS3字体属性整理分析

     字体属性: Font-family: {font-family: name}           {font-family: cursive| fantasy | monospace | serif | sans-serif} Font-size: {font-size: 数值 | inherit…

    好文分享 2025年12月23日
    000
  • 使用css3实现多啦A梦代码

    这篇文章主要为大家介绍使用css3实现多啦a梦代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 Document .doraemon{ position: relative; width:500px; margin:0 auto; } .doraemon .head{ width:320px;…

    好文分享 2025年12月23日
    000
  • text-shadow文字特效实现方法

    【定义】 基础的文本阴影效果,不过对text-shadow属性加以应用可以得到很多绚丽的效果。注:IE9-不支持该属性。 【语法】 text-shadow: h-shadow v-shadow blur color;h-shadow:必需。水平阴影的位置。允许负值。v-shadow:必需。垂直阴影的…

    2025年12月23日 好文分享
    000
  • 详解img[src=””] img无路径情况下,灰色边框去除解决方法

    img[src=””]  img标签无路径情况下,灰色边框去除解决方案 1.Js解决办法 @@##@@ function whenError(a){ a.onerror=null; a.src=’path_default.jpg’; console.log(‘图片出错的时候调…

    好文分享 2025年12月23日
    000
  • 使用CSS3进行样式效果增强的详细介绍

    >>>>>text-align: 使用CSS3进行增强 滑过文字渐变 /* 这段代码实现了当鼠标滑过链接时的渐变效果 */a { color: #007c21; transition: color .4s ease;}a:hover { color: #00bf32; …

    2025年12月23日
    000
  • 使用CSS3制作的一个圆形精美按钮代码

    这是使用css3制作的一个圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的icon效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。 代码中所需要的fonts我已经以附件的形…

    好文分享 2025年12月23日
    000
  • 使用CSS3实现的3D按钮精美效果代码

    使用css3代码来制作3d按钮效果,这是一个系列的3d按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各非常不错,因为很多效果在ps中制作是容易,特别对于设计师来说更容易,但对于一名coder来说,还是有点困难,具体请看制作的代码,让代码来展现所有的一切。我想您和我一样会为这样的效果折服…

    2025年12月23日
    000
  • 详解css3的弹性盒模型

    Flexbox通常能让我们更好的操作他的子元素布局,例如:  如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;  可以快速让他们布局在一列;  可以方便让他们对齐容器的左、右、中间等;  无需修改结构就可以改变他们的显示顺序;  如果元素容器设置百分比和视窗大小改变,…

    2025年12月23日
    000
  • 元素水平垂直居中的css3实现实例代码

    这篇文章主要为大家详细介绍了元素水平垂直居中的css3实现实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 话不多说,代码如下 伸缩布局*{ margin: 0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-b…

    好文分享 2025年12月23日
    000
  • CSS3文本两种实例效果

    css3文本效果实例1: 文本阴影: CSS3 文本阴影h1{text-shadow: 5px 5px 5px #FF0000;}文本阴影效果!     立即学习“前端免费学习笔记(深入)”; 实例二:CSS3自动换行 CSS3 自动换行 p.test{width:11em;border:1px s…

    好文分享 2025年12月23日
    000
  • CSS3多列的三种实例介绍

    这篇文章主要为大家详细介绍了css3多列的三种实例的相关资料,需要的朋友可以参考下 CSS3多列实例1: CSS3 列规则 .newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrom…

    2025年12月23日
    000
  • css3新特性应用之视觉效果详细解读

    目录 padding 背景与边框第一部分 背景与边框第二部分 形状 视觉效果 字体排印 立即学习“前端免费学习笔记(深入)”; 用户体验 结构与布局 过渡与动画 源码下载 一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color in…

    2025年12月23日 好文分享
    000

发表回复

登录后才能评论
关注微信