css3样式生成器,css样式代码大全

CSS sprites 的样式生成工具哪里有

CSS sprites

在线生成工具就有好多

csssprites.com, Sprite Cow, Sprits Pad都是不错的选择

当然专业的设计师喜欢用Photoshop

相关问答

Q1: 网页设计师非常有用的几个在线工具

时间戳转换

功能简介：Unix时间戳和北京时间互转、获取时间戳方法

地址：

代码对比/归并

功能简介：在线检测/比较两个文件文本的不同

地址：

LESS编译器

功能简介：将LESS代码编译成CSS代码，方便前端人员使用

地址：

crontab表达式

功能简介：根据crontab表达式计算未来N次的执行时间

地址：

代码格式化

功能简介：可以对SQL、XML、JSON代码进行格式化和美化

地址：

编码转换

功能简介：URL解码、Native转UTF-8、Native转ASCII

地址：

网页调色板

功能简介：网页颜色选择器、颜色代码查询、RGB颜色值参考

地址：

正则表达式

功能简介：正则表达式匹配和替换、多种常用正则表达式

地址：

答题

功能简介：学霸，快来做题，提升一下你的技能吧

地址：

Markdown

功能简介：将web上的文本转换成HTML文档

地址：

UBB编译器

功能简介：UBB是一种网页中的替代HTML代码的安全代码

地址：

进制转换

功能简介：2~36进制之间任意进制转换，支持浮点型

地址：

CSV转HTML

功能简介：将CSV数据转换为HTML的表格,并展示在页面上

地址：

HTML特殊符号

功能简介：HTML特殊字符编码大全

地址：

XML转JSON

功能简介：XML和JSON的内容和输出互相转换

地址：

HTML转JS

功能简介：HTML和JS的内容和输出互相转换

地址：

js/css压缩

功能简介：在线压缩Javascript和CSS代码

地址：

网页常用字体

功能简介：总结了各种常见的网页字体的显示效果

地址：

Cron生成器

功能简介：可以在线生成任务调度Quartz的Cron表达式

地址：

JSON格式化

功能简介：Json解析、验证、格式化、压缩、以及Json与XML相互转换

地址：

SQL格式化

功能简介：sql在线美化、格式化、脚本压缩

地址：

端口扫描

功能简介：扫描常用或指定的端口，查看端口是否开放

地址：

Base64编码解码

功能简介：将字符base64编码加密,或者将base64加密的字符还原

地址：

MD5加密

功能简介：生成32位和16位的大写和小写的密文

地址：

摩斯电码

功能简介：在线摩斯电码加密解密

地址：

IP查询

功能简介：查询IP或域名的地理位置和宽带供应商、查看本机IP

地址：

文字加密解密

功能简介：支持AES、DES、RC4、Rabbit 等多种算法

地址：

HTTP状态查询

功能简介：检测网页返回的HTTP状态码

地址：

生成htpasswd

功能简介：生成htpasswd

地址：

favicon图标制作

功能简介：将上传图像剪切并生成ico格式的图标

地址：

传图识字

功能简介：可以将一段含有英文文字的照片免费转化成文字

地址：

gif图制作

功能简介：一键生成gif动态图、闪图和搞笑表情包

地址：

生成二维码

功能简介：可以设置图像格式、容错率、大小、颜色及LOGO

地址：

图片转pdf

功能简介：在线免费将多张图片转成pdf文档，一键生成pdf文档

地址：

人脸识别

功能简介：在线人脸识别，自动识别人脸批量裁剪出头像图片

地址：

DIY卡通头像

功能简介：免费的动漫人物制作工具，可以随心定制男女卡通头像

地址：

传图识色

功能简介：可以识别出光标所在处图片的颜色，并提取出图片的主色调

地址：

手绘图片

功能简介：可以自动生成手绘风格照片，还可以改变照片的模糊度

地址：

图片转Base64

功能简介：图片和Base64编码互转

地址：

衣服尺码计算

功能简介：输入你的身高体重，即可计算出你需要的衣服尺寸

地址：

身份证信息查询

功能简介：输入身份证号，查询归属地、性别和出生年月

地址：

科学计算器

功能简介：开方(√)、圆周率(π)、倒数(1/x)、正弦(Sin)

地址：

大小写转换

功能简介：可以实现人民币数字大写转换和英文大小写转换

地址：

日期间隔计算

功能简介：一款可以计算两个日期之间的天数的工具

地址：

汉字转拼音

功能简介：可以将汉字转化为带声调的拼音

地址：

文字去重

功能简介：该工具可得到无重复数据的文字

地址：

单位换算器

功能简介：长度、面积、重量、温度等单位一键对等转换

地址：

中文简繁转换

功能简介：将输入的一段文字转换为简体或繁体

地址：

阴阳历转换

功能简介：支持农历公历互查，公历和农历互相转换

地址：

邮编区号查询

功能简介：输入省份、城市、区号或邮编查询该地区号

地址：

字数统计

功能简介：快速计算文章中汉字、标点、英文和数字的个数

地址：

Q2: 为什么在一些css3渐变代码生成器里,webkit渐变的私有写法要写两种？

旧版↓

-webkit-gradient(linear, 0 0, 0 100%, from(color), to(color))

新版↓

-webkit-linear-gradient(top，color，color)

标准↓

linear-gradient(to bottom, rgba(255, 255, 100, 1), rgba(255, 220, 0, 1))

旧版的好像只有webkit内核的浏览器支持过一段时间

新版的几乎是所有现代浏览器都支持，但是要带-webkit-, -moz-, -ms-之类的前缀

标准版是所有浏览器最新版都支持，不用前缀的

最好是所有都写以兼容更多浏览器

Q3: CSS3知识汇总16：clip-path

2021年2月19日学习笔记

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】

【八角形】

【菱形】

需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等

scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin

通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整

【裁切路径方案clip-path菱形】

【相关知识点】

clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）

生成器

一、基本图形

inset()矩形（上右下左的边距round上右下左圆角）

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

circle圆形

circle()可以传人2个可选参数：

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比

2. 圆心位置，默认为元素中心点

半径公式

如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比

ellipse椭圆

ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

二、多边形polygon--正三角形

x: 0, y:100% 从元素的左上角开始，并从那里开始移动

x: 50%, y: 0

x: 100%, y: 100%  元素右边，元素底部

从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点

正方形

从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点

正五边形  59/（59+95）=38.31%，31/（81*2）=19.14%

162/2 = 81

59是上面三角形的高度

95是下面三角形的高度

31是下面四边形的高度

正六边形  50/（100+50 2）=25%，150/（100+50 2）=75%

50 是左边三角形的高度

100 是边长

正七边形 

22/（100+62 2）=10.09%

202/（100+62 2）=90.18%

43/（43+97+78）=19.72%

（43+97）/（43+97+78）=64.22%

62/（100+62 2）=27.68%

（100+62）/（100+62 2）=72.32%

正八边形

71/（100+71 2）=29.34%

（71+100）/（100+71 2）=70.66%

五角星

红叉叉

标签

也可用于动画中

如果觉得百分比不好计算，可以换算成px

下面就是第一个点的计算方法

35.00%*800=280px

29.75%*400=119px

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了

如果不同是没有效果的

小技巧，如果点不够，可以将两个坐标点进行重合即可

推荐网址：

30个动物全部使用CSS3写的。超牛

Q4: CSS3 的按钮怎么快速实现样式

HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个按钮CSS样式以下是该css3点击按钮特效的通用CSS样式：插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：上面的CSS代码可以生成如下图的动画效果：在“Stana”效果中，使用了html5SVGclipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。在“Stoja”效果中使用了CSSclip-path属性，这个效果也需要浏览器的支持才能看得到的。

Q5: css3怎么实现这个样式

图片的高度是可以指定的,js可以控制,document.getElementById("img").style.width=;