您当前的位置：首页 > 枫桥随记 > CSS笔记网站首页CSS笔记
css样式首字放大模糊文本梯形导航条的写法
模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}
使用示例：<div><p class="blur">玉龙博客 | www.yulongbk.com</p></div>
简单的方法调整图片大小
.content img {height:auto;width:500px;}
CSS首字放大
p:first-letter {display: block;float: left;margin: 5px 5px 0 0;color: red;font-size: 1.4em;background:
#ddd;font-family: Helvetica;}
用CSS翻转图像
#content img {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform:
scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}
移除被点链接的点框
a {outline: none}或者a {outline: 0}
元素透明
.element {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}
使用CSS显示链接之后的URL
a:after{content:" (" attr(href) ") ";}这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。
为手持设备定制特殊样式
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">
用图片充当列表标志
ul {list-style: none}ul li {background-image: url("path-to-your-image");background-repeat: none;background-
position: 0 0.5em;}
禁止自动换行
h1 { white-space:nowrap; }
user-select 禁止用户选中文本
div {user-select: none; /* Standard syntax */}
清除手机tap事件后element 时候出现的一个高亮
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
增强用户体验，使用伪元素实现增大点击热区
<.btn::befoer{content:"";position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;}
伪元素实现换行，替代换行标签
inline-element ::after{content:"A";white-space: pre;}
box-sizing 让元素的宽度、高度包含border和padding
{box-sizing: border-box;}
calc() function, 计算属性值
div {width: calc(100% - 100px);}例子就是让宽度为100%减去100px的值 css实现不换行、自动换行、强制换行//不换行white-space:nowrap;//自动换行word-wrap: break-word;word-break: normal;//强制换行word-break:break-all;
perspective 透视
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。.div-box {perspective: 400px;}
设置图像透明度的两种方式
opcity:0.6；background:rgba(0,0,0,.6)；
position定位属性
position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。position的属性值：absolute：生成绝对定位的元素；fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；relative：生成相对定位的元素，相对于其正常位置经行定位。z-index：指定一个元素的堆叠顺序。
cursor属性
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。CSS提供的cursor值：pointer ：小手指；help：箭头加问号；wait：转圈圈；move：移动光标；crosshair：十字光标。通过pointer属性我们可以伪造超链接：<span>pointer</span>
隐藏没有静音、自动播放的影片
video[autoplay]:not([muted]) {display: none;}
Font-Size 基准
/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */body {font-size:10/16;}/* 然后就可以用em做统一字体单位了 2.4em = 24px */h1 {font-size: 2.4 em}
透明容器
.element {filter:alpha(opacity=50); /* for ie */-moz-opacity:0.5; /* for ff */-khtml-opacity: 0.5; /* for
webkit as chrome */opacity: 0.5; /* for opera */}
平行四边导航条代码
使用css3 的 2D变形中的 skew() 倾斜属性，让伪元素倾斜而不是li倾斜，是为了让li的文本正常显示。
平行四边导航条源码如下：
<style>
.keithh li { list-style: none; position: relative; display: inline-block; padding: 10px 15px; color:
#fff; cursor: pointer;}
.keithh li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top:
0; border-radius: 5px; z-index: -1; background: #2175BC; transform: skewX(-25deg);}
.keithh li:hover::after { background: #39a3f5;}
</style>
<body>
<ul class='keithh'> <li><a href="http://www.yulongbk.com">玉龙博客</a></li> <li>恒强制版</li> <li>智能吓数</li> <li>枫语人生</li> <li>
</body>
使用css3 3D 变形中的 perspective()、rotateX()、transform-origin。
perspective(): 用于设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果会明显；反之，值越大，用户与3D空间Z平面距离越远，视觉效果越小。
rotateX(): 3D空间上X轴的旋转,tansform-origin: 指定元素的旋转中心点位置，可以控制梯形倾斜。值为bottom，不倾斜；值为left，左倾斜；值为right，右倾斜。
梯形导航条源码如下：
<style>
.keith li { list-style: none; position: relative; display: inline-block; padding: 20px 15px 5px 15px;
margin-left: -10px; color: #fff; cursor: pointer;}
.keith li::after { content: ''; position: absolute; top: 0;
bottom: 0; left: 0; right: 0; z-index: -1; background: #2175BC; border: 1px solid #fff; border-top-right-
radius: 8px; border-top-left-radius: 8px; transform: perspective(0.5em) rotateX(5deg); transform-origin:
bottom;}
.keith li:hover::after { background: #39a3f5;}
</style>
<body>
<ul class='keith'> <li><a href="http://www.yulongbk.com">玉龙博客</a></li> <li>恒强制版</li> <li>智能吓数</li> <li>枫语人生</li> <li>
</body>
写文章不易，如果您觉得文章对您有帮助。
打赏激励下作者吧，谢谢支持！
~(@^_^@)~
微信打赏扫一扫
支付宝打赏扫一扫
下一篇：返回列表
