css outline实例教程

<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>

<p class="solid">A solid outline</p>

<p class="double">A double outline</p>

<p class="groove">A groove outline</p>

<p class="ridge">A ridge outline</p>

<p class="inset">An inset outline</p>

<p class="outset">An outset outline</p>
</body>
</html>

 

时间: 2024-10-29 07:36:35

css outline实例教程的相关文章

css div 实例教程

css div入门教程了,下面我们来看看各位也是现在流量的布局div css喽,这种布局想对table 布局来讲确实有一定优势哦了,但是在制作与设计方面确实很难了,好了今天我们就来看个实例教程吧,先看看下面的效果. 这是我们的效果图片了,首页是一张背景图片,然后页我们用li标签或标签都可以实现了,好我们先来看看div  css代码吧,然后再讲教程. <h2><img src="images/deliveryservice.jpg"></h2> <

Sass自动化处理CSS动画实例教程

有一天,Harry Roberts有一段有关于他网站上的代码在twitter求教,如果有可能,在某些方面得到改善.Harry Roberts做的是使用keyframes的carousel动画,所以说使用一些数学计算是有可能得到相应改善.     "Why do we have to learn algebra, Miss? We're never going to use it-" -Everyone in my maths class bit.ly/UaM2wf 有什么好主意? 据我

CSS Border 实例教程

边境的CSS ,我们的个人喜爱的CSS属性,让您可以完全自定义的边界附近出现的HTML元素.与HTML ,它曾经是不可能发生的边界附近的一个要素,除了就座.的CSS边框让你创造清晰,定制的边框样式很少的工作,而陈旧的方法的HTML . border风格类型 有许多类型的边框样式在您的处置.我们建议您尝试了许多彩色/边界式的组合来获得一个想法所有不同的期待您可以创建.注:我们使用的CSS类以下,因此,请检查的CSS类的教训,如果你不理解. p.solid {border-style: solid;

CSS实例教程:简单的button风格的UI按钮

文章简介:CSS实例教程:简单的button风格的UI按钮. button应该是UI库中最常用到的一种.我个人对google+的那种简单的button风格比较喜欢,因为那样在不同的浏览器下视觉差异不是很大.不过现在自己确实已经没有心思去琢磨怎么去弥补ie的不足,所以下面的东西就不要拿ie打开了.还是贴出代码吧 <!DOCTYPE html> <html> <head>                        <title></title> 

CSS网页设计教程:表单Button的Outline

文章简介:CSS网页设计教程:表单Button的Outline. outline的使用,大家都喜欢在reset样式表中直接重置: * {   outline: none; } Eric Meyers在他的CSS Reset是这样重置的: /* remember to define focus styles! */ :focus {     outline: 0; } 这些方法大家都可以说常见了.可是有一点可能大家还是不太清楚--outline在表单的button中使用时,在firefox浏览器下

CSS实例教程:简单的的滑动导航栏效果

文章简介:CSS实例教程:简单的的滑动导航栏效果. 由于网页字体的限制,以及对导航栏美观的需求,使用background-repeat来做一个简单的文字导航栏已经远远不够了.在很多场合,导航栏的背景是一个图案,字体也不再是单调的宋体,这就需要我们把导航栏的整体效果做图在网页中使用. 今天我们就来做一个简单的的滑动导航栏效果(不知道应该叫它什么^_^),效果如下图:   思路:通过改变链接鼠标悬停状态(hover)的背景图片,来达到把鼠标放上去有高亮显示的效果. 方法:在本例中,我们是通过调整各链

CSS横向导航菜单实例教程

CSS横向导航菜单实例教程2,又一款css导航菜单.   <ul id="nav">      <li><a href="http://www.alixixi.com/">Div+CSS教程</a></li>      <li><a href="http://www.alixixi.com/" id="current">CSS布局实例</

CSS标签切换代码实例教程 比较漂亮_经验交流

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

CSS实例教程:用列表ul制作CSS横向菜单的基础知识

在前面的文章中学习<用列表ul制作CSS横向菜单的基础知识>/article.asp?id=395.实现的原理我们都能理解了,但这样的菜单还远远不能满足我们的需要,我们需要制作出比较美观的菜单,我们今天学习让菜单有一个矩形的背景,并且当鼠标激活时能有所变化(hover).废话不多说了,让我们开始吧! <ul id="nav">       <li><a href="http://www.111cn.net/">Div+