CSS基础教程：图片（一）

hudson2022
159 阅读2分钟

CSS基础教程：图片（一）

hudson 译 原文

图片是可以增强网页设计、传达信息和提升用户体验的强大工具。虽然不推荐包含大量图片，但精心选择和放置图片可以极大地促进网站的成功。

以下是用于样式化图片的 CSS 属性列表：

序号属性描述
1height设置图像的高度。
2width设置图像的宽度。
3border设置图像的边框。
4image effects设置图像的不同效果，如模糊、亮度、对比度等。
5image-orientation确定图像的显示或方向。
6image-rendering控制浏览器应如何渲染图像。
7background-image定义要放置在元素背景中的图像资源的指针。
8border-image此属性允许您在元素周围添加图像作为边框。
9opacity允许您控制图像的透明度或不透明度。
10object-fit指定如果未保持其宽高比，则应调整图像的方式。
11object-position用于将替换元素（如图像）定位在其容器中。
12box-shadow帮助向元素（如图像）添加阴影效果。
13border-radius定义元素边框（如图像）的圆角。

设置图片边框

border 属性用于为图像设置边框。

以下是示例：

<html>
<head>
</head>
<body>
   <h2>图像边框</h2>
   <div>
      <img style="border: 10px inset black; margin-bottom: 5px;" src="images/white-flower.jpg" alt="white-flower">
      <img style="border: 10px dashed red;" src="images/white-flower.jpg" alt="white-flower">
   </div>
</body>
</html>

设置边框半径

CSS 中的 border-radius 属性用于定义元素边框（如图像）的圆角。通过调整 border-radius 值，可以控制元素每个角的圆度或使它们完全圆形。

border-radius 可以具有以下值：

  • length：任何长度值，如 px、pt、em 等。
  • percentage (%)：任何百分比值，如 30%、50%、5% 等。
  • initial：设置为初始值。
  • inherit：从父元素继承。

border-radius是以下属性的缩写：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

注意：border-radius允许在一个声明中使用一个、两个、三个或四个值。

在添加了边框半径之后，上述图片将会变成这样：

在这里插入图片描述

以下是示例：

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px;
   }
</style>
</head>
<body>
   <h2>图像边框半径</h2>
   <div>
      <img style="border-radius: 40px 60px;" src="images/white-flower.jpg" alt="white-flower">
   </div>
   <div>
      <img style="border-radius: 50%;" src="images/red-flower.jpg" alt="red-flower">
   </div>
   <div>
      <img style="border-top-left-radius: 50%;" src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <img style="border-bottom-right-radius: 2em;" src="images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

设置图像尺寸

height 属性用于设置图像的高度。该属性可以具有长度或百分比的值。

以下是示例：

<html>
<head>
</head>
<body>
   <h2>图像高度</h2>
   <div>
      <p>长度为 300px 的高度</p>
      <img style="height: 300px;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
   <div>
      <p>百分比为 30% 的高度</p>
      <img style="height: 30%;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
   <p>高度 - 自动</p>
      <img style="height: auto;"  src="images/orange-flower.jpg" alt="orange-flower">
   </div>
</body>
</html>

width 属性用于设置图像的宽度。该属性可以具有长度或百分比的值。

以下是示例：

<html>
<head>
</head>
<body>
   <h2>图像宽度</h2>
   <div>
      <p>长度为 300px 的宽度</p>
      <img style="width: 300px;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>百分比为 30% 的宽度</p>
      <img style="width: 30%;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
   <div>
      <p>宽度 - 自动</p>
      <img style="width: auto;"  src="images/pink-flower.jpg" alt="pink-flower">
   </div>
</body>
</html>
avatar
文章
阅读
粉丝