XML:CSS基础之三

最新推荐文章于 2024-07-25 19:54:22 发布
最新推荐文章于 2024-07-25 19:54:22 发布
阅读量411 收藏
点赞数
文章标签： xml css filter class stylesheet xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhao_19/article/details/2198273
版权

 

ex001.html

<!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>CSS图象滤镜</title>

<link href="ex001.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p><img src="245352.jpg" width="400" height="300" class="img"/><img src="245352.jpg" width="400" height="300" class="img2" /></p>
<p><img src="245352.jpg" width="400" height="300" class="img3" /><img src="245352.jpg" width="400" height="300" class="img4" /></p>
<p><img src="245352.jpg" width="400" height="300" class="img5" /><img src="245352.jpg" width="400" height="300" /></p>
<p><img src="245352.jpg" width="400" height="300" class="img6" /><img src="245352.jpg" width="400" height="300" class="img7" /></p>
<div class="text1">Blur 滤镜</div><div class="text2">Blur 滤镜</div><div class="text3">Blur 滤镜</div>
<div class="text4">Blur 滤镜</div><div class="text5">Blur 滤镜</div><div class="text6">Blur 滤镜</div></body>
</html>
 

ex001.css

.text1 {
 height: 50px;
 width: 100px;
 filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2");
 font-family: "宋体";
 font-size: 11pt;
 font-weight: bolder;
}
.text2 {
 height: 50px;
 width: 100px;
 filter:blur(add=true,direction=135,strength=1）;
 font-family: "宋体";
 font-size: 11pt;
 font-weight: bolder;
}
.text3 {
 height: 50px;
 width: 100px;
 filter: DropShadow(Color=gray, OffX=4, OffY=4, Positive=1);
}
.text4 {
 height: 50px;
 width: 100px;
 font-family: "宋体";
 font-size: 11pt;
 font-weight: bolder;
 filter: Glow(Color=#ffff00, Strength=5);
}
.text5 {
 height: 50px;
 width: 100px;
 filter:shadow(color=blue,direction=225);
 font-family: "宋体";
 font-size: 11pt;
 font-weight: bolder;
}
.text6 {
 height: 50px;
 width: 100px;
 font-family: "宋体";
 font-size: 11pt;
 font-weight: bolder;
 filter: DropShadow(Color=gray, OffX=4, OffY=4, Positive=1);
}
.img {
 cursor: wait;
 filter: FlipH;
}
.img2 {
 filter: FlipV;
}
.img3 {
 filter: Alpha(Opacity=80, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=400, FinishY=300);
}
.img4 {
 filter: Alpha(Opacity=80, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=400, FinishY=300);
}
.img5 {
 filter:blur(add=ture,direction=135,strength=10）;
}
.img6 {
 filter: Invert; 
}
.img7 {
 filter: Light; 
}

效果演示如下:

heaven&earth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cours-bases-css:CSS基础课程
07-11
**CSS基础课程** 本课程是为IDRAC（里昂）BAC + 5市场营销的学生设计的，旨在介绍和教授CSS（Cascading Style Sheets）的基础知识。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档...
IT202-Spring2021-activities:CSS基础
03-13
【CSS基础】是Web开发中的一个关键组成部分，它负责网页的样式和布局设计。在这个名为"Spring21活动文件夹"的学习资源中，你将深入理解CSS的基本概念和应用，以便创建美观、响应式的网页。 首先，我们来了解CSS是...
XML：CSS基础之十一
天地会
04-03 401
 box.htmhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">s今日要闻今日要闻  box.css* { margin: 0px; padding: 0px;}body { font-family: "宋体"; font-size: 12px;
XML:CSS基础之五
天地会
03-20 523
LIST.XML清蒸鲈鱼原料鲈鱼葱丝姜丝盐蒸鱼豉油做法：1.鲈鱼洗干净后加绍酒、少许盐、葱丝、姜丝腌制15分钟，随后再冲洗干净，去去腥味；2.将鲈鱼从尾部切开成蝴蝶状，再从背部切一刀铺在盘子里，并在鱼身下铺上葱姜丝，开水上锅蒸5-6分钟关火焖2分钟.将盘子里的汤汁倒掉，浇上蒸鱼豉油，撒上葱丝，最后浇上热油就好啦.虽然切的不是很好，但是能缩短蒸鱼的时间，散热均匀，鱼肉不会老。培根金针菇卷
XML:CSS基础之一
天地会
03-17 937
 poem.xml春晓孟浩然春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。 poem.csspoem { display: block; height: 300px; width: 300px; border: thin dashed #6633CC; background-image: url(b1.jpg); background-repeat: no-repeat
前端：CSS基础知识
lllwky的博客
08-07 2019
CSS基础 一：什么是CSS 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 注：查找CSS样式的网站： CSS样式菜鸟教程 二：选择器 1：idea新建CSS目录样式
XML:CSS基础之二
天地会
03-17 2237
web标准方法目前推荐大家使用XHTML+CSS来制作网站。目标是使结构与表现彻底相分离。          一, 文本格式和颜色 poem_sec.xml名称: 春晓 图片资料春晓①孟浩然春眠不觉晓， 处处闻啼鸟。② 夜来风雨声， 花落知多少。作者：孟浩然孟浩然（689～740），字浩然。襄州襄阳（今湖北襄樊）人。早年隐居鹿门山，四十八岁入长安赶考落第，失意东归，自洛
HTML&CSS-03：CSS基础
普通人一枚
03-20 784
目标：掌握 CSS 属性基本写法，能够使用文字相关属性美化文章页。
前端|Day3:CSS基础（黑马笔记）
weixin_74417136的博客
02-17 1052
CSS基础，黑马学习笔记
第一章：CSS基础入门
艾恩小灰灰的博客
04-05 530
CSS，全称为Cascading Style Sheets（层叠样式表），是一种样式表语言，专门用于描述HTML或其他XML文档（例如SVG、MathML）的展示和格式化。CSS的核心价值在于它实现了内容与表现的分离，使得开发者可以独立修改网页的样式而不影响内容结构，提高了网站的可维护性和可扩展性。：创建一个单独的.css文件，并在HTML文档中通过标签链接至该文件，这种方式便于集中管理和复用样式，提高效率。：在CSS规则中，每个选择器后面跟随一对或多对属性和值，属性和值之间用冒号。
XML CSS基本介绍及用法
cqj7115的博客
11-07 172
CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动掌握CSS基础属性float 属性的常用值包括:left 靠左浮动right 靠右浮动none 不浮动。
XML基础知识介绍——XML与CSS的综合应用
qq_37196494的博客
08-17 363
1. 在XML里链接CSS文件 <?XML-stylesheet type="text/css" href="XML-1.css"?> 通过type说明引入文档的类型，通过href属性说明要引入的CSS文件 example: <?xml version="1.0" encoding="utf-8"?> <?XML-stylesheet type="text/c...
前端技术栈: css和ES6
06-19
**CSS（Cascading Style Sheets）** 是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是分离网页内容与表现，使得网页设计更加灵活和可维护。 1. **选择器与层叠**：CSS...
有用CSS技巧：CSS技巧:)
02-25
在网页设计领域，CSS（Cascading Style Sheets）是至关重要的工具，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。本文将深入探讨一些实用的CSS技巧，帮助提升你的网页设计技能。 基本信息： ...
HTML5前端开发之CSS基础源码
03-17
这个“HTML5前端开发之CSS基础源码”主题深入探讨了CSS的基本概念、语法以及如何应用于实际项目中。下面我们将详细讨论相关的CSS知识点。 1. CSS基本概念： CSS是一种用于定义HTML或XML（包括如SVG、MathML等各种...
使用JavaFx Fxml笔记
BMG-Princess
07-25 579
stage.setTitle("DR295C数据采集传输仪");
Day9--学习三种方式实现mybatis数据库查询（XML映射文件、注解方式、接口扫描）
gitee_nanzhi66的博客
07-25 745
MyBatis 是一个优秀的持久层框架，支持多种方式进行数据库操作，包括使用独立的映射文件（XML）、注解和接口扫描。下面我将分别给出这三种方式的代码案例。
解析capl文件生成XML Test Module对应的xml工具
最新发布
m0_56315547的博客
07-25 658
解析CANoe的CAPL中.can/.cain文件，生成XML Test Module中使用的xml
【Spring Framework】使用 XML 配置文件的使用方法
u013675821的博客
07-25 361
Spring Framework 的 XML 配置提供了强大的灵活性和控制能力，尽管现代开发中更多使用注解和 Java 配置，但了解 XML 配置仍然对维护旧项目和理解 Spring 的核心机制非常有帮助。通过 XML 配置，你可以定义和管理 Spring 容器中的 bean、配置依赖注入、设置 AOP、事务管理等。
ASP.NET网页布局：CSS基础与实践
"ASP.NET程序设计教程中关于使用CSS布局网页的基础知识和实例" 在ASP.NET开发中，CSS（Cascading Style Sheets）是至关重要的工具，它负责定义网页的外观和布局，使开发者能够将内容结构（HTML）与表现样式分离，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值