CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器

 提示工具

分享图片

分享图片

分享图片

分享图片

提示框在鼠标移动到特定的元素上显示

 

分享图片

设置提示框的位置

提示添加箭头

分享图片

提示框的淡入效果

提示框美化

分享图片

 

 

 

图片廓

分享图片

响应式图片

 

 

图像透明

创建透明图像——悬停效果

分享图片

———鼠标放置后———> 

分享图片

创建一个具有文本的拥有背景图像的透明框

 

分享图片

 

 

 图像拼合技术

图像拼合————单个图像的集合

【有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求】

 图像拼合会降低服务器的请求数量,并节省带宽

 

与其使用3个独立的图像,不如使用这种单个图像

分享图片

——————>  

分享图片

图像拼合的悬停效果

 

 

媒体类型

指定文件将如何在不同媒体呈现【以不同的方式显示在屏幕、纸张、听觉浏览器等】

@media 规则

【在相同样式表为不同媒体设置不同的样式】

其他媒体类型 

 

 

 属性选择器

属性选择器——把包含title 的所有元素变成蓝色

<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="//www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>

分享图片

属性和值选择器

[title=runoob]
{
    border:5px solid green;
}

分享图片

多值选择

属性选择器 ~=,*= 的区别

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效