css3定位 css3应用

编程之家2026-06-01661次浏览

各位老铁们好，相信很多人对css3定位都不是特别的了解，因此呢，今天就来为大家分享下关于css3定位以及css3应用的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

css3有哪些新特性包含哪些模块

1、CSS3圆角表格圆角表格，对应属性：border-radius。

2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。

3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。

边框（Borders）

border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果

border-image:控制边框图象 CSS3边框border-corner-image:控制边框边角的图象

border-radius:能产生类似圆角矩形的效果

背景（Backgrounds）

background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content

border:控制背景起始于左上角的边框

padding:控制背景起始于左上角的留白

content:控制背景起始于左上角的内容 CSS3背景background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding

border:会覆盖住背景

padding:不会覆盖背景

background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定

multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。

文字效果（Text effects）

text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。

text-overflow:当文字溢出时，用“…”提示。包 CSS3文字效果括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。

颜色（Color）

HSL colors:除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%, 50%）

HSLA colors:加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）

opacity:直接控制不透明度，用0到1之间的数来表示

RGBA colors:和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。

实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。

经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。

用户界面（User-interface）

resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局

选择器（Selectors）

CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如:nth-child()等。

Attribute selectors:在属性中可以加入通配符，包括^,$,*

[att^=val]:表示开始字符是val的att属性 CSS3选择器[att$=val]:表示结束字符是val的att属性

[att*=val]:表示包含至少有一个val的att属性

其它模块：

（Other modules）

media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。

multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值

column-width:指定每列宽度

column-count:指定列数

column-gap:指定每列之间的间距

column-rule-color:控制列间的颜色

column-rule-style:控制列间的样式

column-rule-width:控制列间的宽度

column-space-distribution:平均分配列间距

如何用css3画一个有边框的三角形

如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0（left:0px; top:0px;）时，会发生什么。

HTML：

</div>

</div>

</div>

</div>

CSS:

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

border-color:transparent transparent#333;/*透明透明灰*/

margin:40px auto;

position:relative;

}

.triangle_border_up span{

display:block;

width:0;

height:0;

border-width:0 28px 28px;

border-style:solid;

border-color:transparent transparent#fc0;/*透明透明黄*/

position:absolute;

top:0px;

left:0px;

}

/*向下*/

.triangle_border_down{

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid;

border-color:#333 transparent transparent;/*灰透明透明*/

margin:40px auto;

position:relative;

}

.triangle_border_down span{

display:block;

width:0;

height:0;

border-width:28px 28px 0;

border-style:solid;

border-color:#fc0 transparent transparent;/*黄透明透明*/

position:absolute;

top:0px;

left:0px;

}

/*向左*/

.triangle_border_left{

width:0;

height:0;

border-width:30px 30px 30px 0;

border-style:solid;

border-color:transparent#333 transparent transparent;/*透明灰透明透明*/

margin:40px auto;

position:relative;

}

.triangle_border_left span{

display:block;

width:0;

height:0;

border-width:28px 28px 28px 0;

border-style:solid;

border-color:transparent#fc0 transparent transparent;/*透明黄透明透明*/

position:absolute;

top:0px;

left:0px;

}

/*向右*/

.triangle_border_right{

width:0;

height:0;

border-width:30px 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent#333;/*透明透明透明灰*/

margin:40px auto;

position:relative;

}

.triangle_border_right span{

display:block;

width:0;

height:0;

border-width:28px 0 28px 28px;

border-style:solid;

border-color:transparent transparent transparent#fc0;/*透明透明透明黄*/

position:absolute;

top:0px;

left:0px;

}

效果如图：

为什么不是我们预想的如下图的样子呢

原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。

再结合上篇我们最开始写的宽高为0的空div:

这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。

为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：

box-shadow:0 0 2px rgba(0,0,0,1);

效果如图：

这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。

HTML不变，CSS：

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

border-color:transparent transparent#333;/*透明透明灰*/

margin:40px auto;

position:relative;

}

.triangle_border_up span{

display:block;

width:0;

height:0;

border-width:0 28px 28px;

border-style:solid;

border-color:transparent transparent#fc0;/*透明透明黄*/

position:absolute;

top:1px;

left:-28px;

}

/*向下*/

.triangle_border_down{

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid;

border-color:#333 transparent transparent;/*灰透明透明*/

margin:40px auto;

position:relative;

}

.triangle_border_down span{

display:block;

width:0;

height:0;

border-width:28px 28px 0;

border-style:solid;

border-color:#fc0 transparent transparent;/*黄透明透明*/

position:absolute;

top:-29px;

left:-28px;

}

/*向左*/

.triangle_border_left{

width:0;

height:0;

border-width:30px 30px 30px 0;

border-style:solid;

border-color:transparent#333 transparent transparent;/*透明灰透明透明*/

margin:40px auto;

position:relative;

}

.triangle_border_left span{

display:block;

width:0;

height:0;

border-width:28px 28px 28px 0;

border-style:solid;

border-color:transparent#fc0 transparent transparent;/*透明黄透明透明*/

position:absolute;

top:-28px;

left:1px;

}

/*向右*/

.triangle_border_right{

width:0;

height:0;

border-width:30px 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent#333;/*透明透明透明灰*/

margin:40px auto;

position:relative;

}

.triangle_border_right span{

display:block;

width:0;

height:0;

border-width:28px 0 28px 28px;

border-style:solid;

border-color:transparent transparent transparent#fc0;/*透明透明透明黄*/

position:absolute;

top:-28px;

left:-29px;

效果如图：

进一步来写气泡框的三角形，如图所示：

HTML：

<span><em></em></span>纯CSS写带边框的三角形

</div>

CSS：

.test_triangle_border{

width:200px;

margin:0 auto 20px;

position:relative;

}

.test_triangle_border a{

color:#333;

font-weight:bold;

text-decoration:none;

}

.test_triangle_border.popup{

width:100px;

background:#fc0;

padding:10px 20px;

color:#333;

border-radius:4px;

position:absolute;

top:30px;

left:30px;

border:1px solid#333;

}

.test_triangle_border.popup span{

display:block;

width:0;

height:0;

border-width:0 10px 10px;

border-style:solid;

border-color:transparent transparent#333;

position:absolute;

top:-10px;

left:50%;/*三角形居中显示*/

margin-left:-10px;/*三角形居中显示*/

}

.test_triangle_border.popup em{

display:block;

width:0;

height:0;

border-width:0 10px 10px;

border-style:solid;

border-color:transparent transparent#fc0;

position:absolute;

top:1px;

left:-10px;

}

(2)东北、东南、西北、西南三角形的写法

继续，来写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形。

原理如图：

根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。

写一个nw（↖）的例子：

HTML：

CSS(1)：

.triangle_border_nw{

width:0;

height:0;

border-width:30px 30px 0 0;

border-style:solid;

border-color:#6c6 transparent transparent transparent;

margin:40px auto;

position:relative;

}

CSS(2)：

.triangle_border_nw{

width:0;

height:0;

border-width:0 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent#6c6;

margin:40px auto;

position:relative;

}

两种CSS效果均如图所示：

以上是利用CSS写三角形，晋级到

(1)有边框的三角形

(2)东北、东南、西北、西南三角形的写法

css3 transition怎么用

css3的transition：允许css属性值在一定的时间区内平滑的过渡。

transition-property：变换延续的时间

transition-duration：在延续时间段

transition-timing-function：变换速度变化

transition-delay：变化延迟时间

a：{all 0.5s ease-in 1s；}这里的四个值分别对应上面的四个属性。

*{margin:0;padding:0;}

ul{width:300px;}

ul:after{clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}

ulli{list-style:none;font-size:12px;color:#069;border:1pxsolid#CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px1px0#96969D;width:280px;height:30px;margin-bottom:20px;}

lia{position:relative;width:230px;height:30px;padding-left:25px;display:block;}

liaimg{position:absolute;top:6px;left:5px;border:0none;display:block;}

liaspan,liastrong{position:absolute;top:0;left:25px;opacity:1;

-webkit-transition:all800mslinear;

-moz-transition:all800mslinear;

-o-transition:all800mslinear;line-height:30px;width:240px;}

liastrong{top:30px;opacity:0;}

lia:hover{color:#FF6500;_background-color:#E5E5E5;font-weight:bolder;}

lia:hoverstrong{top:0;opacity:1;}

lia:hoverspan{top:-30px;opacity:0;}

<div>

<ul>

<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度</span><strong>看看效果如何</strong></a></li>

<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度知道</span><strong>看看效果如何</strong></a></li>

<li><arel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><span>百度文库</span><strong>看看效果如何</strong></a></li>

</ul>

</div>

原理就是利用定位的相对a标签的距离的不同，结合transition的平滑过渡，和显示隐藏，实现动态的文字替换的过程。

关于css3定位，css3应用的介绍到此结束，希望对大家有所帮助。

java编程思想适合初学者吗 java零基础自学java怎么下载安装？java下载官网

css3定位 css3应用

css3有哪些新特性 包含哪些模块

如何用css3画一个有边框的三角形

css3 transition怎么用

css3有哪些新特性包含哪些模块