CSS打造无图片带箭头的DIV方框

<html>
<head>
<title>纯CSS无图片带箭头的DIV方框</title>
<style>
div.container{position:absolute;
top:30px;
left:40px;
font-size: 9pt;
display:block;
height:100px;
width:200px;
background-color:transparent;
*border:1px solid #666;
}
s{
position:absolute;
top:-20px;
*top:-22px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
background-color:#fff;
width:100%;
height:100%;
padding:5px;
*top:-2px;
*border-top:1px solid #666;
*border-top:1px solid #666;
*border-left:none;
*border-right:none;
*height:102px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
</head>
<body>
<div class="container">
<div class="content"><br>这是框中的文字，可动态显示。高度自动增加，应该不错吧^_^</div>
<s>
<i></i>
</s>
</div>
<br />
</body>
</html>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索求999999
， dash
， position
， absolute
， px
， height
， transparent
， css方框模型
font-size
css3 div 带三角箭头、css div加上指向箭头、css div箭头导航条、css div 箭头、css 带箭头的div，以便于您获取更多的相关知识。

时间： 2024-12-28 08:04:48

CSS打造无图片带箭头的DIV方框的相关文章

纯CSS无图片带箭头的DIV方框

<html> <head> <title>纯CSS无图片带箭头的DIV方框</title> <style> div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; *border:1px solid #666; } s{

分享用CSS实现无图片圆角效果

css|圆角 css圆角效果,IE6, firefox均显示正常 <html><head><title>css圆角效果--网页教学网</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.RoundedCorner{backgr

用CSS实现无图片圆角效果

css|圆角 <html><head><title>css圆角效果--网页教学网</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">div.RoundedCorner{background: #9BD1FA}b.rtop, b.rb

CSS实现带箭头的DIV提示框

毕业设计要做一个提示框:当鼠标放在某个链接上时,下边显示有提示功能的窗体.如下: 具体代码实现如下: CSS: 代码如下: .rhsyyhqDIV{ position:absolute; top:555px; left:200px; font-size: 9pt; display:block; height:335px; width:405px; background-color:transparent; display: none; } s{ position:absolute; top:-

纯css定义带箭头的窗口代码

代码如下复制代码 <!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> <head> <title&

PHP+Ajax无刷新带进度条图片上传示例

项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示

CSS无图片技术:灵活运用无图片技术优化性能

文章简介:CSS无图片技术,是我们在写CSS样式中需要形成的一种理念,我不必死磕无图片技术,要在实际的项目权衡利弊,根据实际情况,灵活运用无图片技术做一些合理有效的性能优化. 一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术.二.为什么要"无图片"?首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet Fil

网站性能优化之CSS无图片技术提高价值速度

一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要"无图片"? 首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多. 当然单纯拿这两个来比,还不能说明什么. 下面我

网站性能优化之CSS无图片技术

一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要"无图片"? 首先我们通过yslow 的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多. 当然单纯拿这两个来比,还不能说明什么. 下面