5分钟让你掌握css3阴影、倒影、渐变小技巧！
一、开始让大家看一张他们组合的图片再一步一步做：二、先是建立两个文本不做处理运行如图三、给第一个div字体加上阴影text-shadow: 5px 5px 10px red;text-shadow: 5px 5px 5px red,5px -5px 10px yellow;box-shadow:用法...
一些实用而又记不住的css技巧
user-select 禁止用户选中文本 div { user-select: none; /* Standard syntax */} 清除手机tap事件后element 时候出现的一个高亮 * { -webkit-tap-highlight-color: rgba(0,...
运用CSS改进网站设计的3个技巧
CSS是一种分离表述编码和实际内容的一种最有用的方式，也是一种使搜索引擎最优化的方式，通常，网站设计中会建立一整套的css样式标准，这些标准存储在一个扩展名为css的单独文件中。然后利用HTML标签设计网页的时候，就会用到CSS文件中的内容。三种简单但很有效的设计技术来指导你正确地利用css改进网站...
【开发小技巧】016—如何使用HTML和CSS将文字环绕在图片周围？
对于任何类型的网站，纯文字的网页是很难有吸引力的。现在，将图片与文字的排版设计，可以提升网站的吸引力。图片可以是不同的形状，基本是正方形图片居多。在图像周围放置文字。通过使用HTML和CSS，可以在文本周围放置图像，并且有很多方法实现。图片被文字包围着，在HTML中，我们可以使图像在文本的右侧，左侧...
【转】 CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}...
现代 CSS 高阶技巧，不规则边框解决方案
本文是 CSS Houdini 之 CSS Painting API 系列第四篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样*绘图构建样式！现代 CSS 高阶技巧，完美的波浪进度条效果！在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一...
CSS 常用的兼容性调试技巧
1、实现所有浏览器主页居中Firefox下主页居中代码：.box{margin:0px auto}IE5.5下主页居中代码：body{text-align:center;}将以上两种代码，合在一齐书写：2、单行文本上下居中h1{height:30px;line-height:30px;}3、在IE6...
IE和Firefox浏览器CSS兼容性技巧整理
转自：http://homepage.yesky.com/185/11484185all.shtml#p11484185CSS兼容常用技巧(1)更多精彩相关文章推荐：各大浏览器 CSS3 和 HTML5 兼容速查表IE6/IE7/IE8三个版本的CSS兼容速查手册CSS hack定义技巧浏览器兼容一...
CSS兼容性(IE和Firefox)技巧
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。C...
CSS兼容性(IE和Firefox)技巧大全
CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度，请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处理，作为W3C的标准，一定要加 DOCTYPE声明。C...
现代 CSS 高阶技巧，完美的波浪进度条效果！
本文是 CSS Houdini 之 CSS Painting API 系列第三篇。现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样*绘图构建样式！在上两篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！在这一篇...
现代 CSS 高阶技巧，像 Canvas 一样*绘图构建样式！
在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术但是，这个效果的缺陷也非常明显，虽然借助了 S...
WXSS/CSS萌新技巧Get——text-indent
居家半个月兴起打算学习一下小程序开发，以此为契机注册了51博客，又被新人福利送鼠标垫所吸引（旧鼠标垫搬家时丢了），于是就从这里，开始学着写博客吧！text-indent的作用是给文本加上首行缩进，填入的值即缩进量，和word中的首行缩进效果一样。正值向右缩进，负值向左。在学习案例的时候发现这个属性通...
CSS性能优化的8个技巧
本文作者：高峰，360奇舞团前端工程师，W3C性能工作组成员，同时参与WOT工作组的学习。 我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目...
【开发小技巧】025—如何使用HTML和CSS创建反射效果？
英文 | https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp翻译 | web前端开发反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专...
【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果？
英文 | https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-html-and-css/?ref=rp翻译 | web前端开发模糊文本动画被称为“烟熏效果”，用于为我们的文本提供模糊...
【开发小技巧】028—使用CSS创建卡通动画加载效果
在实际项目开发中，一般都会设计一个动画加载效果，今天这个加载效果非常有趣，可以帮助用户在等待程序加载时，缓解用户着急的情绪。HTML代码：在本文中，设计了代码的基本结构。<!DOCTYPE html> <html lang="en"> <head> <...
HTML、CSS常用技巧
一、HTML在介绍HTML之前，我们先看一下HTML的文档树结构，主要包括哪些：（一）、头部标签1，DoctypeDoctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档。有和无的区别：BackCompat：标准兼容模式未开启(怪异模式、混杂模式)；CSS1Compat：标准兼...
CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景在移动端屏幕宽度有限的前提下，使用横向滚动的方式展示更多的内容。在这样的需求下，希望父元素作为容器，其宽度可以又横向排列资源的总宽度动态撑开，超过祖父元素的宽度；在不超过祖父元素时，自动继承100%的宽度。DOM结构如下：<div class="grantparent"><...
html,css的小技巧和坑
1.img,input元素是行内块元素，多个这种元素会在同一行显示，且支持宽高，img元素支持padding,border，按钮和表格是怪异盒模型。 2.用转义字符来写内容<>,避免尖括号和标签冲突，< 是< >；是> 3.给父元素设置t...