![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
孙_常乐
这个作者很懒,什么都没留下…
展开
-
给边框加个阴影的css样式效果只需要一个box-shadow 属性就够了
定义和用法box-shadow 属性向框添加一个或多个阴影。提示:请使用 border-image-* 属性来构造漂亮的可伸缩按钮!默认值: none 继承性: no 版本: CSS3 JavaScript 语法: object.style.boxShadow="10px 10px 5px #888888" 语法box-shadow: h-shadow v-shad...转载 2018-02-13 09:47:39 · 4916 阅读 · 0 评论 -
如何通过HTML中的map标签给一个图片添加多个超链接,并且coodr属性跟随屏幕大小自动改变,移动端也同样适用!
前两天公司和其他公司合作搞个活动,暂时需要一个页面上放一张海报,并且海报上多处区域要可以点击,当时自己想到的是利用map标签生成区域热点,但是分辨率不同热点区域在不同区域不准确。最后通过简单的几行jq搞定了。代码如下<div style="margin:0 auto"><img src="__STATIC__/images/concert_hall_02.jpg" width="...原创 2018-05-18 10:07:56 · 3183 阅读 · 0 评论 -
如何用css显示一个图片中多个小图标?
CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。先看下面这张300*300的大图片,每个小图标是100*100的。(这张图片名字叫9pic2.jpg)首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小,用width和height设置,然后用background-image把背景图片放进去,比如:.showImage{ back...转载 2018-05-04 14:25:05 · 2698 阅读 · 1 评论 -
css中缓动函数的使用和动画延迟的特效使用与原理
代码地址和实例:http://www.webhek.com/post/css-nav-underline-follow-effect.html缓冲函数地址:https://easings.net/zh-cn#动画延迟地址:http://www.w3school.com.cn/cssref/pr_animation.asp代码信息量太大,需要的话还是去原地址看,原地址的特效是活的,可以更清晰的反应效...转载 2018-05-04 10:47:29 · 1087 阅读 · 0 评论 -
CSS图片翻转动画技术详解
分享: 因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦。需要做的是旋转front和back元素,而不是旋转整个容器元素。如果你使用的是最新版的IE,可以忽略这一节。IE10+是支持的,IE9完全不支持CSS动画。CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果,能...转载 2018-05-03 17:00:49 · 1282 阅读 · 0 评论 -
JQuery判断单个或多个radio是否被选择
if ($('input[name="auth_list_id"]:checked').val()==null) { alert('认证类型必须选择'); $('input[name="auth_list_id"]').eq(0).focus();//当没有选时,焦点返回到第一个radio的选项; return false; }...原创 2018-04-25 16:27:03 · 2254 阅读 · 0 评论 -
tp5中验证码的使用
<div class="input_box"> <div class="input_cpoy_box">验证码</div> <input type="text" name="captcha_code" placeholder="请输入验证码" id="cap_wid"&原创 2018-04-18 13:38:39 · 334 阅读 · 0 评论 -
响应式页面自动沾满屏幕宽度代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>******</title><meta name="viewport" content="width=device-width, initial-scale=原创 2018-04-18 13:25:38 · 312 阅读 · 0 评论 -
CSS绝对定位absolute详解
之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float,对理解绝对定位absolute会大有帮助。先说absolute和float的相似处:包裹性 和 高度欺骗包裹性所谓一图胜千言(唯一的区别是:下图的div增加了absolute)<div style="border:4px solid blue;"> <...转载 2018-02-11 13:21:57 · 402 阅读 · 0 评论 -
利用vertical-align:middle垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS垂直居中</title> <style> .wrapper{ wi转载 2018-02-11 13:35:52 · 257 阅读 · 0 评论 -
CSS 中 display:inline-block 属性使用详解
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。基础知识display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥...转载 2018-05-24 16:13:31 · 33314 阅读 · 0 评论