要设置某一元素的背景为透明，在 chrome 、firefox、opera 下是这样的：background-color: rgba(0, 0, 0, 0.4);rgba 中的最后一个参数 0.4 就是想要的透明度，范围在0～1之间。在 ie 中一般是这样的：background-color: rgb(0, 0, 0); filter: alpha(opacity=40);opacity 表示透明度，它的值范围在 0～100 之间那么如何兼容各浏览器呢？只要把它们写在一起就行了。由于 ie 不支持 rgba，所以会忽略之。其他浏览器对于自己不支持的，...
p背景透明样式：样式代码：.alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:center; padding:20px;}使用方法：<p class=”alert”> 背景透明 </p>html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt...
现在有这么一个实例要求： 1）画五个盒子，分别用红、紫、橙、绿、蓝字体颜色来表示； 2）鼠标点击其中一个盒子时，边框加粗并显示与盒子字体颜色一致的颜色； 效果如下图： （图1）盒子效果图 下面是具体的实现思路： 一、html内容构建 首先利用html内容表达五个盒子内容，代码如下：<ul id=levelGroup><li id=level1 >红</li><li id=level2 >紫</li><li id=level3 >橙</li><li id=level4...
我们可以使用三种方法来给一个对象(例如div,span,table)应用样式。 1：使用#定义样式，并使用id为对象应用样式。 例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Id</title> <style type="text/css"...
说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。 响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-align:justify，这是今天要讲的其中一种方式，另外还...
这篇文章主要介绍了利用CSS中linear制作复杂的边框效果实例分析的相关资料，利用linear-gradient属性制作绚丽的边框效果网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="utf-8" /><title></title><style>.box { margin: 80px 30px; width: 200px; height: 20...
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式了...
box-align 说明box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。>容器元素比子元素大很多的情况下，使用box-align属性，可以指定子元素的排序顺序，并且可以指定子元素如何表示。还有，纵方向排列一说，可以解释为元素内子元素的配置方向默认值为水平，使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。属性值start：标准方向元素，各子要素上端沿着元素上端...
下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧Flexbox实现一个p元素在body页面中水平垂直居中：<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"/><title>Flexbox制作CSS布局实现水平垂直居中</title><style type="text/css">html { height: 100%; } body { display: -webkit-box; /* 老版本语法...