CSS 阴影效果(无需图片即可实现)

先看效果

只需要一个指定div就能实现这个效果,实际上在未来调用之类的上都是很方便的。其实感觉自己实现的还不是特别的好,比起原来的似乎总觉得缺了点什么,但基本也算完成了。

html不多说,就是一个加了.shadow的div,CSS部分才是重点!

核心部分如下:

body .shadow {
  position: relative;
  background-color: #fff;
  margin: 20px auto;
  vertical-align: center;
  border: #fff 1px solid;
  box-shadow: 1px 1px 3px #000, 1px 1px 5px 5px #eee inset;
}
body .shadow:before {
  content: '';
  z-index: -1;
  top: 50%;
  bottom: -3px;
  left: 0;
  right: -1px;
  position: absolute;
  box-shadow: 0px 0px 2px #000;
  border-radius: 500px/10px;
}

因为是用stylus写的,所以生成的CSS就是酱紫的了,不用介意。

box-shadow可以用逗号分隔,然后设定好内外发光,关于box-shadow,

第一个第二个是偏移,第三个是阴影大小,第四个是扩散程度,写着写着就记住了呢www

然后我们用before和after的伪类,现在看看这两个元素还是很好用呢,相当于不用额外的div就能实现效果,否则的话就要加div实现了。

里面有个content属性,可以再before里设定显示内容,这里我们不需要内容,如果你有需要,比如hello,那么content:'hello'就行了。

接着是大小定位,这里也涨姿势了,设定大小的两种方式:

width/height设定

top/bottom/left/right完全设定

这两种方式都能实现,这里就用第二种设定了,顺便定位嘛。

接着box-shadow,处理完阴影,可以先设置background-color设定颜色,这样方便查看。

border-radius: 500px/10px;,可以看手册

时间: 2024-08-21 11:11:51

CSS 阴影效果(无需图片即可实现)的相关文章

无需配置即可创建 React Apps [ 译 ]

本文讲的是无需配置即可创建 React Apps [ 译 ], react.png 原文地址:Create React apps with no build configuration 原文作者:Facebook Incubato 译文出自:掘金翻译计划 译者:Eric 校对者:XHShirley Gocy015 无需配置即可创建 React App 开始 – 如何创建一个新 app. 用户指南 – 如何使用 Create React App 脚手架开发 app. npm install -g

用CSS滤镜实现图片翻转特效

css|滤镜|特效 图片水平翻转 代码: 1.内部插入式 在〈head〉与〈/head〉之间插入: style type = text/css〉 .TurnH{filter:FlipH} /style〉 然后在图片属性代码中加class="TurnH". 注意:在〈head〉与〈/head〉之间插入代码中,TurnH前有一个"."(不包括引号),请一定不要漏掉了. 2.直接插入式 在图片属性代码中加入: style=" filter: FlipH"

CSS设置背景图片

CSS设置背景图片需要用到background属性,其中的background-repeat设置图片平铺的方式,no-repeat为图片不重复平铺.CSS手册中对background-repeat的说明如下: 语法: background-repeat : repeat | no-repeat | repeat-x | repeat-y 取值: repeat : 默认值.背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat

CSS中背景图片定位方法

CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同. 前两种定位,都是将背景图片左上角的原点,放置在规定的位置.请看下面这张图

php实现的css文件背景图片下载器代码_php技巧

本文实例讲述了php实现的css文件背景图片下载器代码.分享给大家供大家参考.具体实现方法如下: 下载css文件里面的背景图片是我们这些盗版份子长期搞的事情,下载个css图片下载器常出现各种广告弹窗,实在扛不住.这里就提供了一个php版的css文件背景图片下载器给大家. 把文件放到php程序目录 dos下面 php.exe cssImages.php 0 http://www.xxxx.com/css/style.css \images\ 先在php程序目录建个images文件夹,呵呵,贴代码:

如何解决CSS JS和图片对网站加载速度的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 对于网站加载速度的严格要求一致是seo优化过程中的重点,如何提升网站加载速度,服务器,网站内容元素等都有很大的关系,本篇文章将从CSS JS和图片三个方面进行详细的讲解. 1.图片 (1)指定图像尺寸 加载图像之前,您的浏览器开始渲染页面.制定图像尺寸,有助于它环绕不可替代的元素.如果没有制定尺寸,一旦图像被下载您的浏览器将回流,为了做到这个

css 样式 求教-CSS样式里图片消失的方式

问题描述 CSS样式里图片消失的方式 ppt里关于页面消失有各种方式,我想做一个向内溶解的方式,就大概是好多照片墙和网站大图切换那样的样式,有8不管该怎么做呢 解决方案 jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜 解决方案二: 你可以看一下css3里面的关于动画,渐变,过渡的部分 可以去菜鸟教程 搜css3

php获取CSS文件中图片地址并下载到本地的方法_php技巧

本文实例讲述了php获取CSS文件中图片地址并下载到本地的方法.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: /**  * 获取CSS中图片地址,并且保存到本地  */ class getInCssImage {            /**           *  图片保存下来          * @param $cssUrl css的url地址          * @param $dir 保存图片的目录          * @return void        

开通局域网共享(访问本机无需验证即可进入的bat和注册表文件_DOS/BAT

开通局域网共享(访问本机无需验证即可进入).cmd 复制代码 代码如下: @ ECHO OFF @ ECHO. @ ECHO.                            说      明 @ ECHO -------------------------------------------------------------------- @ ECHO 本批处理执行后,将作以下一些设置: @ ECHO 1.允许SAM帐户和共享的匿名枚举(原版系统允许,本系统默认是禁用). @ ECHO