`

CSS3——框阴影(Box Shadow)

    博客分类:
  • CSS3
 
阅读更多
一、属性:
  Inset:[no|inset]  /*为空为向外的阴影效果,inset为向内*/
  Horizontal Length:/*X轴位移,可为负值*/
  Vertical Length:  /*Y轴位移,可为负值*/
  Blur Radius:      /*阴影模糊半径*/
  Spread:           /*阴影大小*/
  Shadow Color:     /*阴影颜色*/

二、具体写法:

向外扩散的阴影:
-webkit-box-shadow: 0px 0px 4px 3px #b335b3;
-moz-box-shadow: 0px 0px 4px 3px #b335b3;
box-shadow: 0px 0px 4px 3px #b335b3;


向外扩散的阴影:
-webkit-box-shadow: inset 0px 0px 30px 30px #b335b3;
-moz-box-shadow: inset 0px 0px 30px 30px #b335b3;
box-shadow: inset 0px 0px 30px 30px #b335b3;


引用

CSS3生成器:http://css3generator.com/

分享到:
评论

相关推荐

    精通CSS笔记——是学习精通CSS的一些感悟

    `box-shadow`属性可以给元素添加内阴影、外阴影甚至是模糊半径,而`text-shadow`则可以为文本添加阴影效果,使文字看起来更有立体感。阴影不仅可以用于美化,还可以创建出各种动态效果,如按钮悬停阴影变化等。 ...

    网页模板——JS+css3实现带阴影可点击旋转的3D立体杯子效果源码.zip

    该压缩包文件“网页模板——JS+css3实现带阴影可点击旋转的3D立体杯子效果源码.zip”提供了一个使用JavaScript和CSS3技术构建的3D立体杯子效果的网页模板。这个模板允许用户通过点击交互使杯子进行旋转,同时具有...

    第23章 CSS3边框图片效果

    结合其他CSS3属性,如`border-radius`(圆角)、`box-shadow`(阴影),可以构建出更具视觉吸引力的界面元素。 8. **代码示例** 下面是一个简单的例子,展示了如何使用`border-image`来创建一个带有自定义边框的...

    js带阴影的链接气泡提示框效果.rar

    阴影效果可以通过CSS3的`box-shadow`属性实现,提供水平偏移、垂直偏移、模糊半径和颜色值。 接着,为了实现气泡提示框的缺口设计,我们需要更精细的CSS布局和可能的伪元素(如`:before`和`:after`)。缺口通常通过...

    CSS3 text shadow字体阴影效果

    今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。 一、text-shadow语法 1、语法: 对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色} 注:text-shadow...

    纯css3绘制旺仔头像样式代码

    4. **阴影**:CSS3的`box-shadow`和`text-shadow`属性可以用来增加元素的深度感,为旺仔的头像添加立体效果,如眼睛的高光或阴影。 5. **填充和描边**:通过设置`fill`和`stroke`属性,我们可以控制图形内部的颜色...

    CSS参考手册——CSS基础

    3. **阴影(Box Shadow)**:为元素添加阴影效果。 4. **边框半径(Border Radius)**:创建圆角边框。 5. **背景图片平铺(Background Repeat)**和渐变(Gradient)。 6. **多列布局(Multi-column Layout)**:...

    CSS3网页知识.doc

    最后,我们关注CSS3中的两个重要效果——`text-shadow`和`box-shadow`: 1. `text-shadow`:为文本添加阴影效果,可设置多组属性值。基本语法是`text-shadow: h-shadow v-shadow blur color`,其中`h-shadow`和`v-...

    别具光芒——CSS属性、浏览器兼容与网页布局

    此外,CSS3引入了许多新特性,如阴影效果(`box-shadow`、`text-shadow`)、渐变(`linear-gradient`、`radial-gradient`)、动画(`@keyframes`)和转换(`transform`),这些都极大地丰富了网页的视觉表现。 其次,浏览器...

    网页模板——纯css3绘制的360浏览器标志样式效果源码.zip

    【标题】"网页模板——纯css3绘制的360浏览器标志样式效果源码" 提供了一种使用CSS3技术来实现360浏览器标志的视觉效果。在现代网页设计中,CSS3已经成为一个强大的工具,它允许开发者通过纯CSS代码创建复杂的图形和...

    黑色风格的CSS3立体按钮和椭圆形搜索框.rar

    在本资源中,"黑色风格的CSS3立体按钮和椭圆形搜索框.rar" 提供了一套设计独特的网页元素,包括CSS3实现的立体按钮和椭圆形的搜索框。这些元素采用了现代前端技术,旨在为网站增添专业且时尚的外观。下面我们将详细...

    一个CSS培训教程 —— 是个好东西

    CSS3引入了许多新特性,如圆角(border-radius)、阴影(box-shadow)、渐变(linear-gradient)、变换(transform)、过渡(transition)和动画(animation)。这些新特性极大地丰富了网页的表现形式,并且简化了...

    CSS3_完整教程

    **CSS3 实例——旋转效果** 在CSS3中,可以通过`transform`属性实现元素的旋转。例如,要将一个`div`元素旋转30度,可以使用以下代码: ```css div { transform: rotate(30deg); } ``` 通过点击“亲自试一试”按钮...

    网页模板——纯CSS3实现齿轮式协同转动动画效果源码.zip

    此外,为了实现齿轮的真实感,我们可以利用CSS3的`border-radius`和`box-shadow`属性创建出齿轮的边缘和阴影效果,`transform-origin`属性则可以调整旋转中心点,使齿轮看起来更加自然地转动: ```css .gear { ...

    网页模板——纯CSS3绘制的黑色图标按钮组合特效源码.zip

    2. **纯CSS3绘图**:在CSS3中,可以使用border-radius创建圆角,box-shadow创建阴影,linear-gradient和radial-gradient创建渐变,以及使用伪类如`:hover`, `:active`, `:focus`等实现按钮的不同状态。通过这些技术...

    css做一个3D房子.rar

    在CSS3中,阴影效果如`box-shadow`也能帮助增强3D感觉。通过调整阴影的大小、颜色和偏移量,可以在元素周围制造出逼真的投影,进一步提升3D效果的真实感。 最后,为了确保在不同设备和浏览器上都能正常显示,我们...

    网页模板——纯CSS3实现鼠标经过线条按钮动画特效源码.zip

    5. **阴影效果(Box Shadow)**:可以通过添加阴影来增强按钮的立体感,使得按钮在鼠标悬停时更有深度。 6. **自定义字体和图标(@font-face)**:可以加载并使用自定义字体或图标库,为线条按钮增加个性化的图形...

    css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦

    使用`box-shadow`和`text-shadow`可以添加阴影效果,增加立体感;通过`transform`属性可以调整元素的大小、位置和旋转角度,实现哆啦A梦的动态表情。 更值得一提的是,CSS3的渐变(gradients)、图案(patterns)和...

    纯CSS3绘制可爱的青蛙表情

    此外,阴影(box-shadow和text-shadow)可以增加立体感,例如给眼睛添加深色内阴影,或者给青蛙的轮廓添加微妙的投影,使得整体形象更加立体和生动。 最后,为了适应不同的屏幕尺寸和设备,可以利用媒体查询(media...

    动态网页设计与制作(HTML5+CSS3+JavaScript)(第3版)-PPT课件.zip

    边框半径(border-radius)、阴影效果(box-shadow)和渐变(gradients)则丰富了视觉设计。CSS3还支持动画(transitions和animations),可以创建平滑的过渡效果和自定义动画。 JavaScript是一种广泛使用的客户端...

Global site tag (gtag.js) - Google Analytics