非常漂亮的CSS格式，可以和图片媲美

最新推荐文章于 2025-04-22 14:46:31 发布
原创 最新推荐文章于 2025-04-22 14:46:31 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #交通 #filter #border #div #class

博客展示了CSS样式设置，包括为div元素设置边框、高度、宽度、背景渐变等样式，还展示了投影效果文字的样式设置，如使用glow和dropshadow滤镜，通过设置不同的CSS类来实现不同的视觉效果。

<html>
<head>
<style>
.a
{
BORDER:#bfceff 1px solid;
height:18;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');
width:180;
}
.b
{
BORDER: #bfceff 1px solid;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
HEIGHT: 100px;
width:180;
Font-Family: Courier New;
Font-Size: 15px;
border-top:0;
} </style>
</head>
<body>
<div class="a">&nbsp;</div>
<div  class="b">Hello World!@</div>
</body>

<html>
<head>
<style>
.a
{
BORDER:#bfceff 1px solid;
height:18;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#ddecfb',endColorStr='#ffffff');
width:180;
}
.b
{
BORDER: #bfceff 1px solid;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 12px;
HEIGHT: 100px;
width:180;
Font-Family: Courier New;
Font-Size: 15px;
border-top:0;
} </style>
</head>
<body>
<div class="a">&nbsp;</div>
<div  class="b">Hello World!@</div>
</body>

效果

 
Hello World!@

投影效果的文字

.biaoti{
      FONT-SIZE: 18pt; FILTER: glow(color=000000,strength=2) dropshadow(color=#3333FF,offx=1, offy=1, positive=2); MARGIN: 0px; COLOR: #ffffff; HEIGHT: 20px; TEXT-DECORATION: none
}
<div class="biaoti">西安交通大学软件学院</div>

效果

西安交通大学软件学院

更多的效果

<table border=0 style="border-style: solid; border-width: 1;font-size=12px" width="520">
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:blue;
             filter:glow(color=red,strength=10);height:1">西安交通大学软件学院  </span></td>
  </tr>
  <tr>
    <td width="510">
    <span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:blur(add=t,direction=135,strength=10);height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<div style="color:red;font-size:25pt;height:1;display:block;
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="height:1;width:100%;
   font-family:impact;font-size:30pt;color:navy;display:block;
   filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)">
        <p align="center"> 西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
             height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<span style="font-size:30pt;display:block;
             text-align:center;color:darkblue;
             filter:shadow(color=blue);height:1">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
 filter:dropshadow(color=maroon,positive=1);">西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div align="center" style="height:1;font-size:30pt;
 filter:dropshadow(color=maroon,positive=0);">西安交通大学软件学院</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
 height:1;font-size:20pt;font-family:impact;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
 height:1;font-family:impact;font-size:20pt;background-color:blue">
        <p align="center">SUNNY</div></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font  color="blue" size="6"><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font  color=#E1E4EC size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font 
color=#8C96B5 size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font color=#8C96B5 size=6><b>西安交通大学软件学院</b></font></td>
  </tr>
  <tr>
    <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">西安交通大学软件学院</span></td>
  </tr>
  <tr>
    <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">西安交通大学软件学院</span></td>
  </tr>
</table>
<table align=center  border=0>
  <tr>
    <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>西安交通大学软件学院</b></font></td>
  </tr>
</table>

效果

西安交通大学软件学院
西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院

西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院

SUNNY

SUNNY

西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院
西安交通大学软件学院

好看的css样式
01-30
很好看的css样式列表，自己经常使用的 。喜欢的朋友可以下载
好看的css table样式
01-19
好看的css table样式 常见用于报表相关
比较好看的css 自定义样式（标题 h1 h2 h3）
11-21
效果图 博客园中常用的样式 /*标题h1 h2 h3样式*/ #content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px; } #content h1 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); c
一些好看的css样式
热门推荐
sjw1039115768的博客
06-03 1万+
最近看了了一本书叫《css揭秘》，里面的内容让我有种css原来能真没玩的感觉，哈哈哈。在这里跟大家分享一部分里面的样式，有兴趣的可以去看看。这本书有电子版。先看看效果图：那个蚂蚁行军框是可以动的，有趣html代码，想要看那个css样式就用对应的className&lt;div class="box1"&gt;&lt;h1&gt;css回退样式&lt;/h1&gt;&lt;/div&gt; &lt...
css好看的样式
2301_79078273的博客
12-22 355
【代码】css好看的样式。
打造高效CSS左导航菜单，媲美JavaScript效果
但是，对于基本的导航菜单而言，仅使用CSS已经可以达到非常好的效果，并且更为简洁高效。 在文件名称列表中，我们还看到了“index.html”、“show.jpg”、“css”和“images”，这暗示了该网站可能包含了一个HTML...
实现图片局部放大效果，媲美放大镜功能技巧
这种效果在图像查看、编辑软件以及网页设计中非常常见和实用，它允许用户聚焦查看图片中的特定区域。 在实现图片局部放大效果时，通常需要依赖图像处理算法，确保放大的部分依旧清晰，无模糊或像素化的情况发生。...
精选10款媲美Flash效果的JS图片展示代码
现在，随着HTML5、CSS3的发展和JavaScript库的完善，我们已经能够利用JavaScript来创造出与Flash效果相媲美，甚至更加优秀的图片展示效果。这些效果不仅在视觉上能够吸引用户，还具有更好的兼容性和更高的性能。 3....
基于jQuery与CSS3的水平滚动图片查看器
“jQuery+CSS3图片查看器（水平滚动导航条）”是一种基于现代前端技术实现的网页交互式图片浏览组件，其核心功能是通过结合jQuery的动态控制能力与CSS3提供的先进样式渲染特性，构建出一个支持水平方向拖动浏览图片...
在实现故宫网页设计时，如何通过HTML、CSS和JavaScript实现与故宫官网相媲美的视觉效果和交互体验？
10-27
可以参考《故宫网页设计：7页面UI完美还原，HTML+CSS+JS实现》这一资料，它详细介绍了如何使用HTML、CSS和JavaScript来还原故宫的页面，并且附有源代码，非常适合前端开发者参考和学习。 参考资源链接：[故宫网页...
DIV+CSS漂亮的样式
08-12
几款不错的DIV+CSS样式 里面有3D按钮 层模拟窗口移动
24种非常漂亮的分页css样式
08-17
24种非常漂亮的分页css样式,非常值得研究，各种分页效果均有，而且非常的好看，具有一定的技术含量。
很漂亮又实用的的Input框，支持CSS或者图片两种样式。
06-22
很漂亮又实用的的Input框，支持CSS或者图片两种样式。
纯CSS绘制漂亮的圆形图案效果
09-25
我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧（请见相关文章）。在过去的一年里，我发现这种用CSS画三角形的技术非常的有用和高效，尤其是创建提示框/提示符等类似的网页效果上。
CSS漂亮样式
qq_40714105的博客
04-24 947
纯CSS设置Checkbox复选框控件的样式iframe高度自适应，超简单设置
一些好用的 CSS样式
最新发布
Alice_hhu的博客
04-22 998
一些不常用但是很好用的 CSS样式
css --- > 好看的样式积累
栗子好好吃的博客
04-07 1195
// CSS h1 { text-shadow: 0 0 5px #F00; color: white; font-size: 60px; } // HTML <h1> Hello World! </h1> // CSS h1 { text-shadow: 2px 2px 4px #000; color: white; font-...
各种CSS样式
诗人密语
10-15 531
目录 1、设置字体样式 2、设置文本样式 3、设置图片对齐方式 4、设置超链接样式 5、设置鼠标外观 cursor 6、设置背景样式 7、设置列表样式 1、设置字体样式 属性名 含义 取值（方式） 举例 font-style 设置字体风格 normal（正...
简单惊艳的CSS样式
#的博客
03-09 652
简单惊艳的CSS样式 前言 虽然我不怎么做前端，但是偶尔也喜欢弄个网站啥的，为了收集一些简单使用高13格的样式，于是诞生了这篇文章，酷，而且这篇文章我会不断更新的。 隐藏鼠标 *{ cursor: none!important; } 除了隐藏鼠标之外，还有很多鼠标风格： 文字模糊效果 *{ /*transparent：透明*/ color: transparent; text-shadow: #111 0 0 5px; }...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值