css-box-shadow注意什么才好看？

问题描述

box-shadow注意什么才好看？

之前用过box-shadow这个属性，可是总觉得自己弄的太难看，有什么技巧或者经验吗

解决方案

参考：http://blog.csdn.net/freshlover/article/details/7610269

要好看不光是怎么设置box-shadow，关键是要和你整个页面搭配。比如你的页面使用平面风格，那么box-shadow偏偏是个立体的肯定就不好看，反过来也是。

解决方案二：

caozhy说的很对，要和页面整体搭配协调才会好看，单单一个box-shadow很好看是不可能的

时间： 2024-08-01 20:08:08

css-box-shadow注意什么才好看？的相关文章

CSS滤镜:Shadow属性

ado|css|滤镜 Shadow属性可以在指定的方向建立物体的投影.它的表达式是这样的: Filter:Shadow(Color=color,Direction=direction) 在这里,Shadow有两个参数值:Color参数用来指定投影的颜色:Direction参数用来指定投影的方向. 这里说的方向与我们在第二节Blur属性中提到的"方向与角度的关系"是一样的. 也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗? 光说的话,您恐怕还难以理解,让我们

CSS 滤镜——Shadow滤镜

ado|css|滤镜 Shadow 滤镜语法 {filter:shadow(color=color,direction=direction)} 利用"Shadow"属性可以在指定的方向建立物体的投影,COLOR是投影色,DIRECTION是设置投影的方向.其中0度代表垂直向上,然后每45度为一个单位.它的默认值是向左的270度. 效果如下: CSS滤镜实现 代码 效果拷屏 欢迎光临 <td style=filter:shadow(color=red, direction=45&g

CSS DIV Shadow

/* 2011-11-28 塗聚文 締友計算機信息技術有限公司 CSS DIV Shadow css3 */ #geovinduDiv-shadow { padding:10px; background-color:#f9f9f9; border:1px solid #fff; position:relative; /*Firefox*/ -moz-box-shadow: 3px 3px 4px #000; /*Safari,Chrome*/ -webkit-box-shadow: 3px 3p

CSS box

有时我们需要令一个宽度固定的容器里的子框架居中(例如一个 Div ,或者其他 block 级元素),如果子框架只有一个的话,我们只需要为子框架加上 CSS 属性 margin: auto 就可以了. 但如果我们要让多个子框架居中,并且等分父框架剩余的空间的话,我们对所有子框架使用 CSS box-align: center 来实现这种效果. 可是目前还有相当一部分主流浏览器不支持 box-align 属性,那么我们应该如何编写 CSS,使这种效果能兼容大部分的浏览器呢? 通常的方法为了使多个 b

获取图片像素颜色并转换为CSS 3 box-shadow显示

原理: 1.使用FileReader 读取图片 2.使用canvas 的 getImageData 获取图片像素信息 3.将像素信息转换为CSS3 box-shadow 代码: <!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <title>获取图片像素颜色,转换为css3 box-shadow</title> <style type=&q

JavaScript获取图片像素颜色并转换为box-shadow显示_javascript技巧

一.原理: 1.使用HTML5的FileReader API读取图片FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { var

分享2011年12月的11个最棒的jQuery插件

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在这篇文章中,我们将收集了2011年12月份11个最好的jQuery插件.让你设计出最别致的网站设计! Mosaiqy 一个非常惊人的jQuery1.6和HTML5的插件,帮助你浏览和缩放图片. fancyBox fancybox是一款帮助你为图片,html内容和多媒体创建优雅漂亮并且具有缩放功能的插件.它基于jQuery框架17813.ht

CSS滤镜之Shadow属性

ado|css|滤镜 Shadow属性可以在指定的方向建立物体的投影.它的表达式是这样的: Filter:Shadow(Color=color,Direction=direction) 在这里,Shadow有两个参数值:Color参数用来指定投影的颜色:Direction参数用来指定投影的方向. 这里说的方向与我们在第二节Blur属性中提到的"方向与角度的关系"是一样的. 也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗? 光说的话,您恐怕还难以理解,让我们

CSS3灵活的盒子模型(Flexible Box Module)

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置.详细的说明可以看这个文档. 通过学习和测试,我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处.在这篇文章中,我的所有例子都基于以下 HTML代码: 以下为引用的内容: <body> <div id="box1">1</div> <div id="box2">2</div> <