【JAVA】CSS定位与CSS3属性、渐变、CSS3字体、2D变换
由于您的问题涉及多个方面,我将提供一些CSS3的核心特性的示例代码。
- CSS3属性:
/* 圆角 */
div {
border-radius: 10px;
}
/* 阴影 */
div {
box-shadow: 5px 5px 10px #888888;
}
- CSS3渐变:
/* 线性渐变 */
div {
background: linear-gradient(to right, red, yellow);
}
/* 径向渐变 */
div {
background: radial-gradient(circle, red, yellow, green);
}
- CSS3字体:
/* 使用Google字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
- CSS3 2D变换:
/* 旋转 */
div:hover {
transform: rotate(45deg);
}
/* 缩放 */
div:hover {
transform: scale(1.5, 1.5);
}
/* 平移 */
div:hover {
transform: translate(50px, 50px);
}
/* 倾斜 */
div:hover {
transform: skew(30deg, 30deg);
}
这些示例展示了CSS3的一些基本特性,包括渐变、圆角、阴影、字体以及2D变换。在实际开发中,你可以根据需要将这些属性应用到HTML元素上。
评论已关闭